标签：否则 失败 his 选项参数 通信 ons receive 问号 syn
|
readyState
|
状态描述
|
说明 |
| 0 | UNSENT | 代理（XHR）被创建，但尚未调用 open() 方法。 |
| 1 | OPENED | open() 方法已经被调用，建立了连接。 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，并且已经可以获取状态行和响应头。 |
| 3 | LOADING | 响应体下载中， responseText 属性可能已经包含部分数据。 |
| 4 | DONE | 响应体下载完成，可以直接使用 responseText 。 |
var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open(‘GET‘, ‘./delete.php?id=1‘)
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传 xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据
var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open(‘POST‘, ‘./add.php‘)
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据 xhr.setRequestHeader(‘Content‐Type‘, ‘application/x‐www‐form‐urlencoded‘)
// 需要提交到服务端的数据可以通过 send 方法的参数传递 // 格式：key1=value1&key2=value2
xhr.send(‘key1=value1&key2=value2‘)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
console.log(‘before ajax‘)
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open(‘GET‘, ‘./time.php‘, true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 这里的代码最后执行
console.log(‘request done‘)
}
}
console.log(‘after ajax‘)
console.log(‘before ajax‘)
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open(‘GET‘, ‘./time.php‘, false)
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 这里的代码最后执行
console.log(‘request done‘)
}
}
xhr.send(null)
console.log(‘after ajax‘)
XMLHttpRequest在老版浏览器（IE5/6）中有兼容问题，可以通过另外一种方式解决
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘)
function ajax (method, url, params) {
var res = null
method = method.toUpperCase()
var xhr = new XMLHttpRequest()
// 将 object 类型的参数转换为 key=value&key=value
if (typeof params === ‘object‘) {
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + ‘=‘ + value)
}
// tempArr => [ ‘key1=value1‘, ‘key2=value2‘ ]
params = tempArr.join(‘&‘)
// params => ‘key1=value1&key2=value2‘
}
if (method === ‘GET‘) {
url += ‘?‘ + params
}
xhr.open(method, url, false)
var data = null
if (method === ‘POST‘) {
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)
data = params
}
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
// 不应该在封装的函数中主观的处理响应结果
// console.log(this.responseText)
// 无法再内部包含的函数中通过 return 给外部函数的调用返回结果
// return this.responseText
// 由于异步模式下 这里的代码最后执行 所以不可能在外部通过返回值的方式返回数据
res = this.responseText
}
$.ajax({
url: ‘json.php‘,
type: ‘get‘,
// 设置的是请求参数
data: { id: 1, name: ‘张三‘ },
// 用于设置响应体的类型 注意 跟 data 参数没关系！！！
dataType: ‘json‘,
success: function (res) {
// 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
// 客户端会主观认为服务端返回的就是 JSON 格式的字符串
console.log(res)
}
})
常用选项参数介绍：
url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）
JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于服务器与客户端跨源通信，在后来的Web服务中非常流行。
<!DOCTYPE html>
<html lang="en" >
<head>
<title>JSONP</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert(‘您查询到航班信息：票价： ‘ + json.price + ‘ 元，余票： ‘ + json.tickets + ‘ 张。‘);
},
error: function(){
alert(‘fail‘);
}
});
});
</script>
</head>
<body>
</body>
</html>
jquery在处理jsonp类型的ajax时（虽然jquery也把jsonp归入了ajax，但其实它们不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用。
标签：否则 失败 his 选项参数 通信 ons receive 问号 syn
原文地址：https://www.cnblogs.com/lax-17xu/p/12456735.html
