ajax 01: 基础知识

ajax概述

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

ajax请求核心对象

1. 核心对象：XMLHttpRequest

2. 发送ajax请求流程的代码

   1. 发送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+"")
      

   2. 发送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()
      

3. 获取后端响应的数据

   1. 后端响应json格式的数据

      var jsonObj = JSON.parse(xhr.responseText)
      

   2. 后端响应xml格式的数据

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

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

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

1. ajax get请求有缓存的原因？
2. 哪些浏览器会发生ajax get请求的缓存问题？
3. 如何解决ajax get请求的缓存问题？
   1. 提交请求时带上一个时间戳

常用前后端数据交换格式

基于JSON的数据交换

1. json数据格式的格式规范
   1. {"xxx" : xxx}
2. 如何解析json格式的数据
3. 利用fastjson快速生成json格式的字符串

基于XML的数据交换

1. xml数据格式的格式规范
2. 如何解析xml格式的数据

两种数据交换格式的对比

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

ajax乱码问题

1. 解决方法

    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
   

ajax异步与同步

1. 特点：类似多线程并发

2. 设置：

   xhr.open("GET", "/ajax/ajaxRequest4?" + "username="+username+"", true)	//true为支持异步，false为不支持异步