1. AJAX是什么，如何使用AJAX?
ajax (异步的 javascript 和 xml) 能够刷新局部网页数据而不是重新加载整个网页。
第一步，创建 xmlhttprequest 对象，var xmlhttp =new XMLHttpRequest();
XMLHttpRequest 对象用来和服务器交换数据。
第二步，使用 xmlhttprequest 对象的 open() 和 send() 方法发送资源请求给服务器;
第三步，使用 xmlhttprequest 对象的 responseText 或 responseXML 属性获得服务器的响应;
第四步，onreadystatechange 函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用; onreadystatechange 函数，每次 xmlhttprequest 对象的 readyState 发生改变都会触发 onreadystatechange 函数
2. 具体实现
2.1 创建 XMLHttpRequest();
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();//标准浏览器
} else {
xhr = new ActiveXObject('Microsoft')//IE老版本
}
2.2 准备发送；
// 参数一：请求方式（get获取数据；post提交数据）；
// 参数二：请求地址
// 参数三：同步或异步标志位，默认是true表示异步，false表示同步
// 如果是get请求，那么请求参数必须在url中传递,encodeURI()用来对中文参数
var param = 'username='+uname+'&password='+pw;
xhr.open('get','./check.php?'+encodeURI(param),true);
2.3 执行发送动作；
2.3.1 get请求
xhr.send(null)
2.3.2 post请求
xhr.setRequestHeader("content-type","application/x-www-form-url-urlencoded");//请求头
xhr.send(param);//post请求参数在这里传递，并且不需要转码
2.4 指定回调函数；
xhr.onreadystatechange=function(){
if(xhr.radyState==4){
if(xhr.status==200){
var data=xhr.responseText;
var info=document.getElementById('info');
if(data=='1'){
info.innerHTML='登录成功';
}else if(data=='2'){
info.innerHTML='用户名或密码错误';
}
}
}
}
}
xhr.readyState状态值含义
0 xhr对象初始化；
1 执行发送动作；
2 服务器端数据已经完全返回；
3 数据正在解析；
4 数据解析完成，可以使用了；
xhr.status（部分）状态值含义
200 数据响应正常；
404 没有找到资源；
500 服务器端错误；
3. jquery中 使用 jsonp，解决跨域请求
$(function(){
$('#btn').click(function(){
$.ajax({
type:'get',
url:'http://tom.com/jsonp.php',
dataType:'jsonp',
jsonp:'cb',//自定义参数名字（callback=abc),指的是等号前面的键，后端根据这个键获取方法名，jquery默认的参数名称是callback
jsonpCallback:'abc',//自定义参数名字（callback=abc),指的是等号后面的值
data:{},
success:function(data){
console.log(data.username)
},
error:function(data){
console.log('error')
}
})
})
})
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141488.html
