AJAX_ Asynchronous JavaScript and XML

1. 介绍
   • 异步的JavaScript和XML，可以在不重新加载整个网页的情况下，对网页进行部分更新
   • AJAX的核心是JS对象XMLHttpRequest，XMLHttpRequest可以向服务器发出请求并处理响应，而不阻塞用户
2. 原生AJAX

   window.onload = function(){
       var btn = document.getElementById("btn");
       btn.onclick = function() {
           /* 1. 获取XMLHttpRequest对象
               var xhttp;
               if (window.XMLHttpRequest) {
                   xhttp = new XMLHttpRequest();
                   } else {
                   // IE5,6的获取方式
                   xhttp = new ActiveXObject("Microsoft.XMLHTTP");
               }
           */
           var xhttp = new XMLHttpRequest();
           // 2. 设置一个回调函数
           xhttp.onreadystatechange = function() {
               if (xhttp.readyState == 4) {
                   if (xhttp.status == 200) {
                       // 5. 获取响应数据
                       alert(xhttp.responseText);
                   }
               }
           }
           // 3. 设置一个请求方式以及URL
           var url = "http://localhost:8080/SimpleDemo/ajax";
           xhttp.open("GET", url, true);
           
           // 4. 向服务器发送请求
           xhttp.send(null);
       }
   }
   

   • XMLHttpRequest对象属性
     1. onreadystatechange 定义当readyState属性发生变化时被调用的函数(响应回来后进行处理的回调函数)
     2. readyState 描述HTTP请求的状态
        • 0 请求未初始化 XMLHttpRequest对象已创建或被abort()方法重置
        • 1 服务器连接已建立 open方法已调用，但是send()方法未调用
        • 2 请求已收到 send()方法已调用，HTTP请求已发送到服务器，但未接收到响应
        • 3 正在处理请求 所有响应头部已经接收到，响应体开始接收但未完成
        • 4 请求已完成并且响应已就绪
     3. status 描述响应的状态码
        • 200 OK
        • 404 NOT FOUND
        • 403 Forbidden
     4. statusText 返回状态文本（比如 “OK” 或 “Not Found”）
     5. responseText 以字符串返回响应数据
     6. responseXML 以字符串返回响应数据
   • XMLHttpRequest对象常用方法
     1. open(method, url, async) 规定请求的信息，但是不发送请求
        • method 请求的方式
        • url 请求的路径
        • async true 异步，false 同步
     2. send() 将请求发送到服务器
        • GET请求不传参，或者传null，因为GET没有请求体
        • POST请求传封装请求体的变量
     3. setRequestHeader() 设置请求头
        • POST请求需要用到这个方法，添加一个请求头
        • setRequestHeader(“content-type”, "application/x-www-form-urlencoded);
     4. getResponseHeader() 获取指定的响应头信息
     5. getAllResponseHeaders() 获取全部响应头信息
3. jQuery的AJAX
   • 6个方法
     1. $.ajax()是jQuery提供的最基本的ajax变成方式，它的功能比较强大，但是使用比较麻烦，一般使用
     2. $.load()、$.get()、$.post()简化了$.ajax()操作。用得较多
     3. $.getScript()、$.getJSON() 用于解决跨域问题
   • load()
     1. 载入远程HTML代码并插入到DOM元素中

        $("id").load(url, {请求参数}, function() {
            // 处理响应，这里的响应应该是HTML代码片段
            // 直接插入到$("id")中，成为$("id")的子元素
        })
        

     2. load发起请求，有参数就发起POST，没参数就发起GET
   • ajax()

     $.ajax({
         type: "GET", // 请求方式
         url: "/project/xxx", // 请求路径
         data: "name=tom&age=12", // 请求参数
         dataType: "text", // 预期服务器返回数据类型
         success: function(msg) {
             alert("响应回来的字符串信息:" + msg);
         }
     });
     

     1. DataType
        • “xml”: 返回XML文档，可用 jQuery 处理
        • “html”: 返回纯文本HTML信息；包含的script标签会在插入dom时执行
        • “script”: 返回纯文本JavaScript代码。
        • “json”: 返回JSON数据
        • “jsonp”: JSONP格式
        • “text”: 返回纯文本字符串
   • get(url, data, callback, type)，post(url, data, callback, type)
     • url 请求地址
     • data 请求参数
     • callback 回调函数
     • type 响应数据类型