Ajax 笔记

Ajax

前言

AJAX Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

传统的网页如果需要更新内容，必需重载整个网页面。

语法（原生JavaScript）

function success(text) {
    //成功，对返回的数据进行操作
}

function fail(code) {
    //失败，对状态码进行操作
}

var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (xmlhttp.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (xmlhttp.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(xmlhttp.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(xmlhttp.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
xmlhttp.open('GET', 'url');
xmlhttp.send();

向服务器发送请求

xmlhttp.open(method,url,async);
xmlhttp.send();

属性	描述
open	规定请求的类型、URL 以及是否异步处理请求
method	请求的类型；GET 或 POST
url	文件在服务器上的位置
async	true（异步）或 false（同步）
send	将请求发送到服务器

async默认为true 异步，如果改为false 同步，浏览器会在执行请求时中断，直到请求结束才会响应。

get请求

在URL后面加参数
xmlhttp.open("GET","demo.jsp?fname=Bill&lname=Gates",true);

post请求

使用 setRequestHeader() 来添加 HTTP 头
send() 方法中写数据
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

回调事件

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化
status	http状态码

readyState

状态码	描述
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

status

状态码	描述
100-199	用于指定客户端应相应的某些动作
200-299	用于表示请求成功
300-399	用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499	用于指出客户端的错误
500-599	用于支持服务器错误

故当 readyState 等于 4 且 status 为 200 时，表示响应已就绪

jQuery

$.ajax({
             type: "GET",//请求方式
             url: "",//发送请求的地址
             async:true,//异步请求
             data: //上传的数据,要求为Object或String类型的参数
             dataType: "json",//数据类型
             success: function(data){
                         //成功，对返回的数据进行操作
                      },
            error:function(){
                         //失败
                      },
         });

dataType

类型	描述
xml	返回XML文档，可用JQuery处理
html	返回纯文本HTML信息；包含的script标签会在插入DOM时执行
script	返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求
json	返回JSON数据
jsonp	JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数
text	返回纯文本字符串

success

要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

• 由服务器返回，并根据dataType参数进行处理后的数据。
• 描述状态的字符串。

         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

error

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

json

JSON 是存储和交换文本信息的语法。类似 XML。

通过键/值对组合存储数据

语法

• 数据在名称/值对中
• 数据由逗号分隔
• 大括号保存对象
• 中括号保存数组

例子

    {a: 'Hello'}

等价 JavaScript 语句

    a='Hello'

JSON 和 JS 对象互转

从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'