AJax

Posted 2020-09-07

一：Ajax（Asynchronous javascript and XML）
Ajax的本质是利用浏览器里的一个内置对象(Ajax对象)与服务器进行交互，
使用JavaScript操作服务器返回的数据，将返回的数据放置到页面中，进行
局部刷新。

二：使用Ajax的步骤(使用Get请求的方式)：
1.获取Ajax对象
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Micorsoft.XMLHttp");
}

2.使用Ajax对象调用open("请求方式","请求路径","是否为异步")
xhr.open("get","请求路径?param=value",true); // 在URL中传参

3.绑定状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt=xhr.responseText;
// 将接收到的文本放置于页面中的某个部分
document.getElementById(‘xx‘).innerhtml=txt;
}else{
document.getElementById(‘xx‘).innerHTML=‘状态码不为200‘;
}
}
};

4. 发送请求
xhr.send(null);

三：Ajax的Post请求方式
Post请求时的open(xxx)函数调用方式：
xhr.open("post",‘checkUserServlet‘,true); // 不在URL中传参
// 设置请求头消息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
绑定onreadystatechange事件...
xhr.send(‘uname=‘+uname); // 在发送请求时传参

四：Ajax接收JSON
var jsonStr=xhr.responseText; // 接收服务器发送来的JSON字符串
var jsObj=eval(‘(‘+jsonStr+‘)‘); // 使用eval函数将JSON字符串转换为JavaScript对象，注意：必须在eval()中使用括号

通过jsObj.对象的属性名获取属性值