H5学习感悟03
AJAX
<script>
//XMLHttpRequest
xhr = new XMLHttpRequest();
//先注册事件，这个事件不只是响应的时候触发，状态改变的时候的也触发
xhr.onreadystatechange = function () {
console.log(this.readyState);
if (xhr.readyState == 4) {
//等待响应，接受响应
console.log(this.responseText);//获取服务端响应的内容(响应体)
}
}
xhr.open('get', './test.php');
xhr.send();//发起请求
</script>
<script>
xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('get','./test.php');
console.log(xhr.readyState);
xhr.send();
//console.log(xhr.readyState);
xhr.addEventListener('readystatechange',function () {
console.log(this.readyState);
switch (this.readyState) {
case 2:
console.log(this.getAllResponseHeaders());//获取响应头的内容
console.log(this.getResponseHeader('server'));
break
case 3:
break
case 4:
//接受响应成功
console.log(this.responseText);
break
}
});
</script>
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', './test.php');
xhr.send(null);//传入请求体
//onload 事件就相当于readyState==4 html5新的api
xhr.onload = function () {
console.log(xhr.responseText);
}
</script>
this.getAllResponseHeaders()//获取响应头的内容,返回的是字符串
this.getResponseHeader('server')//获取响应头某个具体的内容
httpRes.readyState值得意义
- 0 初始化请求代理对象 xhr=new XMLHttpRequest();
- 1 open方法已经调用，建立一个与服务端特定端口的链接。（架桥）
- 2 已经接收到了响应报文的响应头(此时响应体接收不到)
- 3 正在下载响应报文的响应体，有可能为null，也有可能不完整,不要在这个状态处理响应体
- 4 整个响应报文已经下载下来了
ajax 设置请求头
如果的请求体是urlencoded格式，就必须设置请求头的content-type 为urlencoded格式,将它设为表单数据
<script>
xhr=new XMLHttpRequest();
xhr.open('post','./testPost.php');//设置请求行
// text/plain;charset=UTF-8
//加入请求头'Content-Type','application/x-www-form-urlencoded'，使请求体是urlencoded格式
//这样服务端才能接受到数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','hcy2019');
xhr.send('age=12&address=广州');//设置请求体(post)
xhr.onload=function () {
//获取响应的状态码
console.log(xhr.status);
//获取响应的状态描述
console.log(xhr.statusText);
//获取响应体
console.log(xhr.responseText);
//获取响应的url
console.log(xhr.responseURL);
}
</script>
get请求
<script>
xhr=new XMLHttpRequest();
xhr.open('get','./test.php?id=9');//get传参
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置表单提交的形式
xhr.send();
xhr.onload=function () {
console.log(xhr.responseText);
}
</script>
同步模式和异步模式
open方法如果不传第三个参数，默认为true，也就是默认是异步模式,传入false就是同步,同步模式send方法会出现阻塞情况
responseText与response的区别
- this.responseText 永远获取的是字符串形式的响应体
- this.response 获得的结果会根据responseType的变化而变化
ajax的封装
/**
*
* @param method get/post 可大写 可小写
* @param url 请求路径
* @param params 传对象/'id=1&age=10'
* @param callBack 回调函数
*/
function ajaxRequest2(method, url, params, callBack) {
method = method.toUpperCase();
var xhr = new XMLHttpRequest();
if (typeof params === 'object') {
var paramsArr = [];
for (var key in params) {
var value = params[key];
paramsArr.push(key + '=' + value);
}
params = paramsArr.join('&');
}
if (method === 'POST') {
//设置请求头
xhr.open(method, url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
params = params || null;
} else {
url = url + '?' + params;
params = null;
xhr.open(method, url);
}
console.log('请求体:' + params);
xhr.send(params);
xhr.onreadystatechange = function () {
if (this.readyState !== 4) {
return;
}
if (callBack != null) {
callBack(this.responseText);
} else {
console.log('没注册回调函数')
}
}
}
jquery的ajax
get请求
<script>
$.ajax({
url: './test.php?id=9',
type: 'get',//method 请求方式
success: function (res) {//请求成功的回调函数
console.log(res);
}
})
</script>
<script>
$.ajax({
url: './test.php',
data:{id:'9'},
type: 'get',//method 请求方式
success: function (res) {//请求成功的回调函数
console.log(res);
}
})
</script>
post请求
<script>
$.ajax({
url: './test.php',
data:{id:'9'},
type: 'post',//method 请求方式
success: function (res) {//请求成功的回调函数
console.log(res);
}
})
</script>
//服务端不指定响应头,可以通过设置dataType来确定响应的数据格式
<script>
$.ajax({
url: './xml.php',
data:{id:'9'},
dataType:'json',//设置响应体的类型
type: 'post',//method 请求方式
success: function (res) {//请求成功的回调函数
//res会根据响应头自动转换成字符串/对象
console.log(res);
}
})
</script>
jquery的ajax回调
$.ajax({
url: './xml2.php',
type: 'post',
data: {id: '9'},
dataType: 'json',
beforeSend: function (xhr) {
//readstate=0
console.log('发送之前',xhr);//状态码==200才会触发这个函数
},
success: function (res) {
//readstate=4
console.log('成功' , res);//状态码==200才会触发这个函数
},
error: function (xhr) {
//readstate=4
console.log('失败' , xhr);
},
complete: function (xhr) {
//失败与成功的共同代码
//readstate=4
console.log('完成' , xhr);
}
});
jq快捷代码
$.post({
url:'./xml.php',
dataType:'json',
data:{id:'9'},
success:function (res) {
console.log(res);
}
});
ajax的全局处理
<script>
//jquery全局事件处理函数
$(document).ajaxStart(function () {
console.log('在AJAX 请求刚开始时执行一个处理函数');
$('.loading').fadeIn();
}).ajaxStop(function () {
console.log('在AJAX 请求完成时执行一个处理函数');
$('.loading').fadeOut();
});
$.ajax({
url: "./xml.php",
type: 'post',
data: {
id: '9'
}
});
</script>
同源策略
- 不同源地址之间默认不能发送ajax请求
- 域名，协议，端口 完全相同=>同源
- 同源的地址之间才可以发送ajax请求
跨域访问 jsonP
Access-Control-Allow-Origin
<script>
//能发出去，服务器能响应，无法拿到响应结果
var img = new Image();
img.src = 'http://www.baidu.com';
</script>
<script>
//能发出去，服务器能响应，无法拿到响应结果
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://www.baidu.com';
document.body.appendChild(link);
</script>
<script>
//能发出去，服务器能响应，无法拿到响应结果
var script = document.createElement('script');
script.src = 'http://www.baidu.com';
document.body.appendChild(script);
function callBack(res){
}
</script>
- 重要的是服务端必须返回js，服务端必须返回的是js脚本
- 客户端先定义好一个回调的js函数，服务端返回这个函数的执行的js代码
jquery jsonP的封装
为每一个请求创建唯一的函数
var function_name='jsonp_'+Date.now()+Math.random().toString().substr(2);
window[function_name]=function (data){
}
<script>
$.ajax({
url:'http://www.baidu.com',
dataType:'jsonp',
success:function (res) {
console.log(res);
}
})
</script>
CORS 跨资源共享
在服务端添加请求头
header('Access-Control-Allow-Origin:*');