AJAX

AJAX Asynchronous JavaScript and XML 异步的 JavaScript 和 XML。

慕课网:https://www.imooc.com/video/5644

跨域 (同源策略)

1
2
3
4
5
6
7
8
9
Access-Control-Allow-Origin *
Access-Control-Allow-Methods "GET"
Access-Control-Allow-Headers *
Access-Control-Max-Age 3600

# Cookie 跨域

*-Origin 值必须为请求地址
Access-Control-Allow-Credentials "true"

NGINX 配置解决跨域

1
2
3
4
5
6
7
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;

add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;

简单请求与非简单请求

  • 简单请求

GET

HEAD

POST

且 请求 header 无自定义头

且 Content-Type 为 text/plain multipart/from-data application/x-www-form-urlencoded

  • 非简单请求

PUT

DELETE

JSON 格式的 AJAX

有自定义头

简单请求 先发送,后验证

非简单请求 先发送 OPTION 请求,通过验证再发送请求

1. 创建 XMLHttpRequest 对象 (XHR)

1
2
3
4
5
<button id="search">按钮名字</button>

<p id="return">
服务器返回的数据会出现在这里
</p>
1
2
3
4
document.getElementById("search").onclick=function(){
xmlHttp=new XMLHttpRequest();
// ...
}

2. 发送请求 open send

1
2
3
4
5
6
7
xmlHttp.open("method", "url", true); // 第三个参数为 async,默认为 true

// 设置 header

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlHttp.send("strring");

3. 获取响应

1
2
3
4
5
6
7
8
9
// 字符串形式的响应

document.getElementById("return").innerHTML=xmlHttp.responseText;

// xml 形式的响应

xmlDoc=xmlHttp.responseXML;

// 之后解析 XML

其他方法

1
2
3
4
5
.statusText 以文本形式返回 HTTP 信息

.getAllResponseHeader() 获取所有响应报头

.getResponseHeader() 查询某个报头的值

判断状态之后再操作 DOM

1
2
3
4
5
6
7
8
9
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
// 做一些事情

document.getElementById("return").innerHTML=xmlHttp.responseText;
}
}
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

JSON 解析

1
JSON.parse("JSON 字符串");

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GEt",
url: "url",
dataType:"json",
beforeSend: function(xhr) {
xhr.setRequestHeader("Access-Toke");
},
headers: {
'Access-Token':$.cookie('access_token')
},
data:{
// post 数据
name:1
},
success:function(data){
alter(data);
},
error:function(){
alert("发生错误");
}
})
})
})

跨域

khs1994 wechat
微信扫码赞赏我的文章
0%