文章目录
介绍AJAX
AJAX [ˈeɪˌdʒæks] (Asynchronous JavaScript and XML)
ajax就是浏览器提供的一套API,可以通过JavaScript调用,从而实现通过代码控制请求与相应,实现网络编程。
ajax使用的步骤
-
创建请求代理对象:
var xhr = new XMLHttpRequest();// 此时xhr.readyState = 0
-
注明请求方式与地址,与服务器端口建立连接:
xhr.open("请求方式","请求地址");//此时建立与服务器端口的连接,xhr.readyState = 1
-
发送请求: xhr.send();
-
获取返回结果:
xhr.onreadystatechange = function() {//该事件时xhr状态改变就会触发
switch(this.readyState){
case 2:
//此时接收到了响应报文的响应头,但是没有接收到响应体
console.log(this.getAllResponseHeaders());//返回值是整个响应头的字符串
console.log(this.getResponseHeader("指定的头的key比如server"));//获取头文件中指定属性的值
break;
case 3://正在下载响应报文的响应体,此时响应体不一定被完全下载
break;
case 4://响应体已被完全下载
//此时可以使用 responseText
break;
}
};
在该部分会有三个状态值分别对应的xhr的readyState值为 2,3,4
- 1)xhr.readyState == 2 时 - - 此时接收到响应报文的响应头,还没有接收到响应体(responseText);
- 2)xhr.readyState == 3 - - 正在下载响应报文的响应体,此时响应体不一定被完全下载
- 3)xhr.readyState == 4 - - 响应体已被完全下载
readyState 对应的值与描述如下表所示:
值 | 状态描述 | 说明 |
---|---|---|
0 | UNSENT | 初始化代理,即创建XMLHttpRequest实例对象 |
1 | OPEND | xhr对象调用open()方法,建立连接 |
2 | HEADERS_RECEIVED | 调用send()方法,且已经能够获取到状态行和响应头了 |
3 | LOADING | 响应体下载中,responseText此时已经包含了部分数据,只是还没下载完 |
4 | DONE | 响应体下载完成,responseText此时包含了全部数据 |
其他相关信息的设置:
设置请求头:
xhr.setRequestHeader(’’,’’);
设置请求体:
xhr.send(‘key1=value1&key2=value2’);//以 urlencoded 格式设置请求体
一旦设置请求体是urlencoded格式的话,一定要设置请求头中的 Content-Type值为application/x-www-form-urlencoded:
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
也就是说请求头的Content-Type值要根据请求体格式的变化而对应的变化。
再比如请求体发送的是json字符串数据的话,对应的Content-Type 对应的就是json
使用ajax发送GET请求并传递参数
var xhr = new XMLHttpRequest();
xhr.open("GET","mytest.php?userid=1001");
xhr.send(null);
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
console.log(this.responseText);
this.response; //获取到的响应体结果由this.responseType的值决定
this.responseText ;//获取到的响应体是字符串
}
}
使用ajax发送POST请求并传递参数
var xhr = new XMLHttpRequest();
xhr.ope("POST","login.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=${username}&password=${password}");
xhr.onreadystatechange = function() {
if(this.readyState == 4){
console.log(this.reaponseText);
}
}
设置返回数据类型
xhr.responseType = "json";//一般情况,该行可以不用写
xhr.onreadystatechange = function(){
}
jQuery中对ajax的封装
1)jQuery.ajax(); 或者是$.ajax();
- 一个参数,以对象方式
$.ajax({
url: "接口地址路径",
type:"post",
data: { key1: value1,...},
feforeSend: function(xhr){},//请求发送之前,及xhr在调用open方法之前
success: function(res) {//请求成功,只有返回状态码为200 的时候才会触发
//res就是返回的响应体内容,且返回的数据跟服务端设置的Content-Type 值有关,比如服务端设置为application/json, 此时res就是一个json对象而不是json字符串。
},
error: function(xhr) {// 请求失败,状态码非200 时
//xhr对象
},
complete: function(xhr){
//请求完成,不管成功还是失败都会触发该方法
}
});
- 两个参数
$.ajax("url路径",{
type: "post",// 请求方式
data: { key1: value1,...}
success: function(res) {
// res 就是返回的响应体的字符串内容
}
});
2)jQuery中更快的捷方式:$.get(); 和 $.post();
底层是$.ajax()封装的
$.get("url...",{key1:value1}, function(res){
//res就是返回的响应体内容,且返回的数据跟服务端设置的Content-Type 值有关,比如服务端设置为application/json, 此时res就是一个json对象而不是json字符串。
});
$.post("url...",{key1:value1}, function(res){
});
3)$.getJSON(); 和 $.postJSON();
和上面的区别在于,不管服务端的Content-Type值,最终会将响应体内容解析为json对象,使用方式同上。
跨域
概念
同源策略是浏览器的一种安全策略,域名、协议、端口完全相同才是同源的,不同源地址间的请求就叫做跨域。
默认情况下只有同源的地址才可以相互通过ajax的方式请求。如果想要实现不同源之间可以进行相互请求,必须服务端和客户端配合才能完成。
如何实现跨域
方案:
可以通过script标签的src属性请求一个服务器端的文件,该文件返回结果是js代码,该代码可以调用当前页面定义好的js函数,从而实现将服务器返回的数据发送到了客户端。
1) JSONP (JSON with padding)
JSONP是一种借助于script标签发送跨域请求的技巧。 其原理就是上述方案,它是在客户端使用script标签请求服务器,服务器端返回一段带有函数调用的JavaScript全局函数调用的JavaScript代码,将原本需要返回给客户端的数据传递进去。也就是说客户端采用script标签发送请求,服务器一定要返回一段JavaScript代码。
实现方式:
var script = document.createElement("script");
script.src = "不同源的url";
document.body.appendChild(script);
function myFunction(data) {//该函数会被返回的JavaScript代码调用
}
服务端返回的应该是
"myFunction(json数据)"
jQuery中封装的JSONP
$.ajax({
url: urlstr,
dataType: "jsonp",
success: function(res){
},......
});
2)客户端不用改动,只需要将服务器端添加响应头,一行代码即可:
//设置允许跨域访问
header("Access-Control-Allow-Origin: *");