ajax 01: 基础知识()-ajax

ajax 01: 基础知识()

ajax概述

• 组成：asynchronous + javascript + xml
• 特点：

  可发送异步请求(这也是与传统请求方式的区别)
  用javascript语言编写代码
  前后端数据交换格式为xml(不局限于xml：例如现在更为常用的json，还有其它格式，例如：普通字符串)

• 可发送异步请求(这也是与传统请求方式的区别)
• 用javascript语言编写代码
• 前后端数据交换格式为xml(不局限于xml：例如现在更为常用的json，还有其它格式，例如：普通字符串)
• ajax请求的应用场景：需要发送异步请求或者要局部刷新页面

ajax请求核心对象

• 核心对象：XMLHttpRequest
• 发送ajax请求流程的代码

  发送ajax post请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“POST”, “/ajax/ajaxRequest4”, true)
  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
  xhr.send(“username=”+username.value+””)

  发送ajax get请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true)
  xhr.send()

• 发送ajax post请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“POST”, “/ajax/ajaxRequest4”, true)
  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
  xhr.send(“username=”+username.value+””)

• 发送ajax get请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true)
  xhr.send()

• 获取后端响应的数据

  后端响应json格式的数据
  var jsonObj = JSON.parse(xhr.responseText)

  后端响应xml格式的数据
  response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

  var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

• 后端响应json格式的数据
  var jsonObj = JSON.parse(xhr.responseText)

• 后端响应xml格式的数据
  response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

  var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

ajax发送get请求时的缓存问题

• ajax get请求有缓存的原因？
• 哪些浏览器会发生ajax get请求的缓存问题？
• 如何解决ajax get请求的缓存问题？

  提交请求时带上一个时间戳

• 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

• json数据格式的格式规范

  {“xxx” : xxx}

• {“xxx” : xxx}
• 如何解析json格式的数据
• 利用fastjson快速生成json格式的字符串

基于XML的数据交换

• xml数据格式的格式规范
• 如何解析xml格式的数据

两种数据交换格式的对比

• json特点：轻量，易解析
• xml特点 ：体积大，解析较繁琐，但是格式严谨，更安全

ajax乱码问题

• 解决方法
  request.setCharacterEncoding(“utf-8”);
  response.setContentType(“text/html;charset=utf-8”);

ajax异步与同步

• 特点：类似多线程并发
• 设置：
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true) //true为支持异步，false为不支持异步

ajax概述

• 组成：asynchronous + javascript + xml
• 特点：

  可发送异步请求(这也是与传统请求方式的区别)
  用javascript语言编写代码
  前后端数据交换格式为xml(不局限于xml：例如现在更为常用的json，还有其它格式，例如：普通字符串)

• 可发送异步请求(这也是与传统请求方式的区别)
• 用javascript语言编写代码
• 前后端数据交换格式为xml(不局限于xml：例如现在更为常用的json，还有其它格式，例如：普通字符串)
• ajax请求的应用场景：需要发送异步请求或者要局部刷新页面

ajax请求核心对象

• 核心对象：XMLHttpRequest
• 发送ajax请求流程的代码

  发送ajax post请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“POST”, “/ajax/ajaxRequest4”, true)
  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
  xhr.send(“username=”+username.value+””)

  发送ajax get请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true)
  xhr.send()

• 发送ajax post请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“POST”, “/ajax/ajaxRequest4”, true)
  xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
  xhr.send(“username=”+username.value+””)

• 发送ajax get请求
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
  if(this.readyState == 4){
  if(this.status == 200){
  //执行代码
  }else{
  //执行代码
  }
  }
  }
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true)
  xhr.send()

• 获取后端响应的数据

  后端响应json格式的数据
  var jsonObj = JSON.parse(xhr.responseText)

  后端响应xml格式的数据
  response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

  var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

• 后端响应json格式的数据
  var jsonObj = JSON.parse(xhr.responseText)

• 后端响应xml格式的数据
  response.setContentType(“html/xml;charset=utf-8”) //后端要设置响应数据的类型

  var xmlObj = xhr.responseXML //前端按照xml格式进行数据解析

ajax发送get请求时的缓存问题

• ajax get请求有缓存的原因？
• 哪些浏览器会发生ajax get请求的缓存问题？
• 如何解决ajax get请求的缓存问题？

  提交请求时带上一个时间戳

• 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

• json数据格式的格式规范

  {“xxx” : xxx}

• {“xxx” : xxx}
• 如何解析json格式的数据
• 利用fastjson快速生成json格式的字符串

基于XML的数据交换

• xml数据格式的格式规范
• 如何解析xml格式的数据

两种数据交换格式的对比

• json特点：轻量，易解析
• xml特点 ：体积大，解析较繁琐，但是格式严谨，更安全

ajax乱码问题

• 解决方法
  request.setCharacterEncoding(“utf-8”);
  response.setContentType(“text/html;charset=utf-8”);

ajax异步与同步

• 特点：类似多线程并发
• 设置：
  xhr.open(“GET”, “/ajax/ajaxRequest4?” + “username=”+username+””, true) //true为支持异步，false为不支持异步