本文共 2637 字，大约阅读时间需要 8 分钟。

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 响应数据类型

转载地址：http://mikmf.baihongyu.com/