AJAX

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33975951

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5a9bf39d6fb9a028d20768de

本文介绍了AJAX的发展历程及其实现方式，从最初的IE5引入ActiveX对象到各大浏览器支持XMLHttpRequest，再到突破同源限制的CORS机制。文中详细讲解了如何使用XMLHttpRequest进行异步请求，包括设置请求头、监听状态变化等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原来发请求都不好用，于是在1999年，微软公司发布IE浏览器5.0版，IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

AJAX

Async Javascript And XML（异步 JavaScript 和 XML)

使用 XMLHTTPRequest 发请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面

请求方法

let request=new XMLHttpRequest()
request.open('请求','url')
request.send()
request.onreadystatechange=()=>{}//监听
复制代码

详见mdn-XMLHttpRequest

readyState 的值

值	状态	描述
0	UNSENT (未打开)	open()方法还未被调用.
1	OPENED (未发送)	open()方法已经被调用.
2	HEADERS_RECEIVED (已获取响应头)	send()方法已经被调用, 响应头和响应状态已经返回.
3	LOADING (正在下载响应体)	响应体下载中; responseText中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.

返回XML格式的字符串可以用DOM操作，太麻烦，于是我们使用符合JSON对象格式的字符串!

onreadystatechange

当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发

document.onreadystatechange = function () {
    if (document.readyState === "4") {
       你的操作
    }
}
复制代码

cros

协议、域名、端口必须完全一样才能发送ajax请求，就是同源

突破同源CROS “Cross-Origin Resource Sharing”

CROS说:我们一家的，浏览器别搞我兄弟

后台设置一个响应头

比如
Access-Control-Allow-Origin: http://kbiao.me
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET，PUT, DELETE
Access-Control-Allow-Headers: content-type。
复制代码

AJAX的功能

JS设置请求header

第一部分:request.open('GET'，'https://www.baidu.com')
第二部分:request.setRequestHeader('content-type','x-www-from-urlencoded'）
第四部分:request.send('a=1&b=2')

JS获取响应header

第一部分:request.status/request.statusText
第二部分:request.getResponseHeader()/request.getAllResponseHeaders()
第四部分:request.responseText

自己封装一个jquery.ajax

window.jquery.ajax=function({url, type,data,success，error,headers}){
    let request=new XMLHttpRequest()
    request.open(type,url)
    for(let key in headers){
        let value=headers[key]
        request.setRequestHeader(key,value)
    }
    request.onreadystatechange=()=>{
        if(request.readyState === 4){
            if(request.status >= 200 && request.status < 300){
                sucess.call(undefined,requset.responseText)//callback的参数
            }else if(request.status>=400){
                error.call(undefined,request)//callback的参数
            }
        }
    }
    requset.send(data)
}
复制代码

Promise

ajax返回一个Promise实例
Promise接受一个函数,返回一个then哈希表,then(fn1,fn2)接受2个函数，返回一个then的哈希表,then也会返回一个Promise实例，所以可以进行链式操作

把上面的jquest.ajax跟进下

window.jquery.ajax =  ({url,type,data,headers}) =>{
  return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest()
    request.open(type, url)
    for (let key in headers) {
      let value = headers[key]
      request.setRequestHeader(key, value)
    }
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 300) {
          resolve.call(undefined, request.responseText) //callback的参数
        } else if (request.status >= 400) {
          reject.call(undefined, request) //callback的参数
        }
      }
    }
    request.send(data)
  })
}



复制代码