Ajax笔记_ajax表达式笔记-CSDN博客

本文链接：https://blog.csdn.net/yyuanxiwen/article/details/82587143

A JAX
A JAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。
使用 A JAX 的过程可以类比平常我们访问网页过程

创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open(‘GET’, ‘./time.php’)
通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
//通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) {
//通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
}

readyState
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：
readyState 状态描述说明
0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用，建立了连接。
2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态
行和响应头。
3 LOADING 响应体下载中， responseText 属性可能已经包含部分数据。
4 DONE 响应体下载完成，可以直接使用 responseText 。
时间轴：初始化->建立连接->接收到响应头->响应体加载中->加载完成。
事件：xhr.addEventListener(‘readystatechange’, function () {})
一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 后续逻辑…
}
}
参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
处理响应数据渲染，模板引擎：artTemplate：https://aui.github.io/art-template/
XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘1 Microsoft.XMLHTTP’)

A JAX 请求封装
/**

发送一个 AJAX 请求
@param {String} method 请求方法
@param {String} url 请求地址
@param {Object} params 请求参数
@param {Function} done 请求完成过后需要做的事情（委托/回调）
*/
function ajax (method, url, params, done) {
// 统一转换为大写便于后续判断
method = method.toUpperCase()
// 对象形式的参数转换为 urlencoded 格式
var pairs = []
for (var key in params) {
pairs.push(key + ‘=’ + params[key])
}
var querystring = pairs.join(’&’)
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
ActiveXObject(‘Microsoft.XMLHTTP’)

xhr.addEventListener(‘readystatechange’, function () {
if (this.readyState !== 4) return
// 尝试通过 JSON 格式解析响应体
try {
done(JSON.parse(this.responseText))
} catch (e) {
done(this.responseText)
})
// 如果是 GET 请求就设置 URL 地址问号参数
if (method === ‘GET’) {
url += ‘?’ + querystring
}
xhr.open(method, url)

// 如果是 POST 请求就设置请求体
var data = null
if (method === ‘POST’) {
xhr.setRequestHeader(‘Content‐Type’, ‘application/x‐www‐
form‐urlencoded’)
data = querystring
}
xhr.send(data)
}

jQuery 中有一套专门针对 A JAX 的封装，功能十分完善，经常使用，需要着重注意。参考：
http://www.jquery123.com/category/ajax/

http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

$.ajax
$.ajax({
url: ‘./get.php’,
type: ‘get’,
dataType: ‘json’,
data: { id: 1 },
beforeSend: function (xhr) {
console.log(‘before send’)
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log(‘request completed’)
}
})

常用选项参数介绍：
url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
ajax(‘get’, ‘./get.php’, { id: 123 }, function (data) {
console.log(data)
})
ajax(‘post’, ‘./post.php’, { foo: ‘posted data’ }, function (data) {
console.log(data)
})
$.ajax({
url: ‘./get.php’,
type: ‘get’,
dataType: ‘json’,
data: { id: 1 },
beforeSend: function (xhr) {
console.log(‘before send’)
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log(‘request completed’)
}
})

contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）

$.get：GET 请求快捷方法
$.post：POST 请求快捷方法

全局事件处理
http://www.jquery123.com/category/ajax/global-ajax-event-handlers/
自学内容
$(selector).load()
$.getJSON()
$.getScript()

以后的文档参考mdn，这个死以后的标准文档。

JSON语法规则: