Ajax - 简单入门

1. 概念

　　局部刷新技术, 不是一门新技术, 是多种技术的组合, 是浏览器端的技术

 

2. 作用

　　实现在当前结果页中显示其他请求的响应内容

 

3. 基本使用流程

// 创建 Ajax引擎对象
var ajax;
if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
}

// 复写onreadystatement函数        
ajax.onreadystatechange = function() {
    // Ajax状态码
    ajax.readyState
    // Http响应状态码
    ajax.status
    // 响应的内容
    ajax.responseText
    // 响应的内容(XML)
    ajax.responseXML
}    

// 发送请求
ajax.open(method, url, async);
    // method: 请求方式
    // url: 请求地址
    // async: 设置同步异步, true(异步), false(同步), 默认为true
    
ajax.send(null);

 

4. Ajax状态码: readyState的值

0 : 表示XMLHttpRequest已建立, 但还未初始化, 这时尚未调用open方法
1 : 表示open方法已经调用, 但未调用send方法(已创建, 未发送)
2 : 表示send方法已经调用, 其他数据未知
3 : 表示请求已经成功发送, 正在接收数据
4 : 表示数据已成功接收

 

5. Http响应状态码: status的值

200 : 请求成功
404 : 请求资源未找到
500 : 内部服务器错误

 

6. 发送请求

GET方式: 请求数据拼接在URL后面
    ajax.open("GET", "url?a=1&b=2");
    ajax.send(null);
POST方式: 请求数据需单独的发送
    ajax.open("POST", "url");
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("a=1&b=2");

 

7. 响应内容的格式

1. 普通字符串
2. json: 
    后台将数据按照json的格式拼接好字符串, 前端使用eval方法将接收的字符串数据直接转换为js对象 
    json格式: var 对象名 = {属性名:属性值, 属性名:属性值, ....}
3. XML数据