「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战」
1. AJAX是什么,如何使用AJAX?
ajax(异步的javascript 和xml) 能够刷新局部网页数据而不是重新加载整个网页。
第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器;
第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应
第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用;
onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
2. 具体实现
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')
}
})
})
})