一、概述
ajax不是一门编程语言，是一门技术
ajax可以在页面加载完毕后从服务器读取数据
可以在不重新加载页面的情况下接受服务端的数据
可以在后台上传数据给服务器
ajax使用了浏览器内建对象XMLHttpRequest和DOM操作
异步地从服务器读取数据，只用更新一部分数据
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
二、工作流程
![]()
pic_ajax.gif
pic_ajax.gif
1.在页面绑定时间（一个点击时间或者其他事件）
2.Javascript创建一个XMLHttpRequest对象并且向服务器发起请求
3.服务器处理请求
4.服务器向网页返回响应
5.JavaScript读取响应
6.更新页面信息
三、XMLHttpRequest对象
- 基本所有浏览器都有这个内建对象
对象的方法
-new XMLHttpRequest() 新建对象
- abort() 取消当前请求
- getAllResponseHeaders() 返回头部信息
- getResponseHeader() 返回特定的头部信息
- open(method, url, async, user, psw) 指定特定请求
- send(string) 使用POST请求向服务器发起请求
- setRequestHeader() 设置头信息
状态码
status_code.jpg
四、Ajax请求
- 使用open()和send()方法发送请求
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
- 以上代码的三个参数分别代表请求类型，文件的地址，和是否同步bool
- ajax传输数据有三种类型，分别为XML，HTML，JSON，其中json格式使用最多
五、JQuery操作Ajax
- 贴一段代码
$(function () {
$('#btn').on('click',function () {
$.getJSON('helloajax.json',function (data) {
var name = data.person.name;
var age = data.person.age;
$('div').append(name)
})
})
})
