一、AJAX - 阿贾克斯
1、什么是AJAX？
Asynchronous Javascript And Xml
是可以创建快速动态网页的技术。可以实现异步更新，而不需要加载整个网页，只加载需要更 新某部分网页。
同步访问：当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待，效率偏 低。
异步访问：当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作 不需要一直等待，效率偏高。
** Xml : eXtensible Markup Language
可扩展的 标签 语言
AJAX优点：
1、异步 访问
2、局部 刷新
AJAX的使用场合：
1、搜索建议
2、表单验证
3、前后端完全分离
2、AJAX的核心对象 – 异步对象（XMLＨttpRequest）
1、什么是XMLＨttpRequest？
简称为“xhr”，称为异步对象，代替浏览器向服务器发送请求并接受响应
xhr是由JS来提供
２、创建异步对象（ｘｈｒ）
主流的异步对象是XMLHttpRequest类型的，并且主流浏览器都支持（IE7+， Chorme，Firefox,Opera）全部支持，但不支持IE低版本浏览器（IE6以及以下）
XMLＨttpRequest，需要使用ActiveXobject() 来创建异步对象
支持 XMLＨttpRequest：
new XMLＨttpRequest()
不支持 XMLＨttpRequest：
new ActiveXobject("Microsoft,XMLHTTP")
下面是common.js代码:
function getXhr(){
//如果浏览器支持XMLHttpRequest,则创建XMLHttpRequest的对象并返回
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
//如果浏览器不支持XMLHttpRequest的话,则创建ActiveXObject的对象并返回
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
3、xhr的成员
1、方法 - open（）
作用：创建请求
语法：open(method,url,async)
method：请求方法，取值为'get'或'post'
url：请求地址，字符串
async：是否采用异步的方式发送请求
true：使用异步方式发送请求
alse：使用同步方式发送请求
ex:
xhr.open('get','/server',true)
2、属性 - readyState
作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
由0-4共五个值来表示五个不同的状态
0：请求尚未初始化
1：xhr已经与服务器建立链接
2：服务器端已经开始接收请求
3：请求正在处理中
4：响应已完成
3、属性 - status
作用：表示服务器端的响应状态码
200：表示服务器正确处理所有的请求以及给出响应
404：请求资源不存在
500：服务器内部错误
4、属性 - responseText
作用：服务器端的响应数据
5、事件 - onreadystatechange
作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
在该函数中，只有当readyState的值为4并且status的值为200时，可以正常接收 responseText
6、方法 - send()
作用：通知xhr向服务器发送请求
语法：send(body)
body：表示请求的主体
get请求：没有请求主体的，所以body的值为null
xhr.send(null)
post请求：有请求主体的，所以body的位置处要表示请求数据
xhr.send("请求数据")
xhr.send("参数=值&参数=值")
4、AJAX的操作步骤
1、GET请求
1、创建xhr对象
2、创建请求 - open()
3、设置回调函数 - onreadystatechange
判断状态并且接收数据
4、发送请求 - send()
注意：如果有请求提交数据，则需要在url的后面拼查询字符串
2、POST请求
1、请求提交的数据要作为send() 的参数进行提交
xhr.send('参数=值&参数=值')；
2、修改请求消息头
在AJAX中，提交POST请求时，AJAX默认将Content-Type请求消息头的值修改 为”text/plain“，所以导致数据无法正常提交
解决方案：
将Content-Type的请求消息头再修改回”application/x-www-form- urlencoded“即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
注意：如果有请求提交数据，则需要在send()中传递数据
例如：
$(function(){
$("#btnAjax").click(function(){
//1.获取xhr
var xhr = getXhr();
//2.创建请求
xhr.open(‘get’,’/01-server’,true);
//3.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
var resTxt = xhr.responseText;
console.log(resTxt);
}
}
//4.发送请求
xhr.send(null)
});
});
二、JQUERY 与 AJAX
1、$obj.load(url,data,callback)
作用：异步加载数据到 $obj 元素中
参数：
url：异步请求的地址
data：传递给服务器端的参数（可选），该数据将决定请求方法是什么
1、可以传递普通的字符串
"name=MrWang&age=30"
2、可以是JSON对象
｛
"name":"Mrwang",
"age":30,
｝
callback：异步请求成功之后的回掉函数（可选）
取值为匿名函数
function(resText,statusText){
rexText:响应数据，
statusText：响应数据的状态
}
2、$.get(url,[data],[callback],[type])
url:异步请求地址
data:异步请求的参数
1、字符串：name = value&name=value
2、JSON：{"name":"value","name":"value"}
callback：请求成功后的回调函数
function(resText){
rexText：表示响应成功后的响应数据
}
type：响应回来的数据的类型
1、html：响应回来的是html文本
2、text：响应回来的是数据是text文本
3、json:json对象
4、script:js脚本代码
注意：如果此处指定了类型，那么在callback中，无需做类型的转换
3、$.post()
4、$.ajax()
作用：自定所有的ajax行为
语法：$.ajax({ajax设置的参数数据对象})；
参数：
1、url：字符串，表示异步请求的地址
2、type：字符串，请求方式（get,post）
3、data:传递到服务器端的参数
1、字符串："name=value&name=value"
2、JSON对象：{"name":"value"}
4、dataType：字符串，响应回来的数据的格式
1、html
2、xml
3、text
4、script
5、json
6、jsonp
5、success：回调函数，请求响应成功时的回调函数
function(data){
data:表示服务器端响应回来的数据
}
6、error：回调函数，请求或响应失败时的回调函数
7、beforeSend：回调函数，在发送ajax请求之前的回调函数，如果return false的话则表示终止本次请求
例子：以下便是Jquery中$ajax()：
$(function(){
$("#btnload").click(function(){
var params = {
'name':'MrWang',
'age':32,
}
$("#show").load('/02-server',
params,
function(resText,statusText){
console.log("响应成功");
console.log("resText:"+resText);
console.log("statusText:"+statusText);
});
});
});