手写AJAX

简介: AJAX(Asynchronous JavaScript and XML),指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。

AJAX 是什么

AJAX(Asynchronous JavaScript and XML),指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。

后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。

AJAX 的步骤

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 服务器返回 XML 格式的字符串
  4. JS 解析 XML,并更新局部页面

不过随着历史进程的推进,XML 已经被淘汰,取而代之的是 [JSON]

先上代码

基础代码

const request = new XMLHttpRequest()
request.open('get', 'https://api.apihubs.cn/holiday/get');
request.onreadystatechange = function () { 
    // 4代表下载完成
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304 ) {
        // 成功的callback
      }else{
        // 失败的callback
      }
    }
}
request.send();

稍加封装

const ajax = (method, url, data, success, fail) => {
  const request = new XMLHttpRequest()
  request.open(method, url);
  request.onreadystatechange = function () { 
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304 ) {
        success(request)
      }else{
        fail(request)
      }
    }
  }
  request.send(data);
}
function successCallback(data){
    console.log("suceessData:",data)
}
function failCallback(data){
    console.log("failData:",data)
}
//操作示例
ajax('get','https://api.apihubs.cn/holiday/get',{},successCallback,failCallback)

属性参考(如有需要)

XMLHttpRequest 的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。

状态 描述
0 UNSENT 代理被创建,但尚未调用 open() 方法
1 OPENED open() 方法已经被调用
2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得
3 LOADING 下载中; responseText 属性已经包含部分数据
4 DONE 下载操作已完成

XMLHttpRequest.status

XMLHttpRequest.status 属性返回一个整数,表示服务器回应的 HTTP 状态码。

XMLHttpRequest.onreadystatechange

XMLHttpRequest.onreadystatechange 属性指向一个监听函数。readystatechange 事件发生时(实例的 readyState 属性变化),就会执行这个属性。

XMLHttpRequest.responseText

XMLHttpRequest.responseText 属性返回从服务器接收到的字符串,该属性为只读。只有 HTTP 请求完成接收以后,该属性才会包含完整的数据。

XMLHttpRequest 的实例方法

XMLHttpRequest.open()

XMLHttpRequest.open 方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。

它一共可以接受五个参数:

  • method:表示 HTTP 动词方法,比如GET、POST、PUT、DELETE、HEAD等
  • url: 表示请求发送目标 URL
  • async(可选): 布尔值,表示请求是否为异步,默认为 true。如果设为 false,则 send() 方法只有等到收到服务器返回了结果,才会进行下一步操作。由于同步 AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker 里面使用。所以,这个参数轻易不应该设为false。
  • user(可选):表示用于认证的用户名,默认为空字符串
  • password(可选):表示用于认证的密码,默认为空字符串

注意:再次使用 open(),等同于调用 abort()

XMLHttpRequest.send()

XMLHttpRequest.send 方法用于实际发出 HTTP 请求。

它的参数是可选的:

  • 如果不带参数,就表示 HTTP 请求只有一个 URL,没有数据体,典型例子就是 GET 请求
  • 如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是 POST 请求

GET 请求:

const request = new XMLHttpRequest()
request.open('get', url);
request.onreadystatechange = function () { 
 ....
})
request.send();

POST 请求:

const request = new XMLHttpRequest()
request.open('post', url);
request.onreadystatechange = function () { 
 ....
})
request.send({
    key: 'value',
});

XMLHttpRequest.setRequestHeader()

XMLHttpRequest.setRequestHeader 方法用于设置浏览器发送的 HTTP 请求的头信息。

该方法必须在open()之后、send()之前调用。

该方法接受两个参数。第一个参数是字符串,表示头信息的字段名,第二个参数是字段值。

**

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
xhr.send(JSON.stringify(data));

XMLHttpRequest.getResponseHeader()

XMLHttpRequest.getResponseHeader 方法返回 HTTP 头信息指定字段的值。

XMLHttpRequest.getAllResponseHeaders()

XMLHttpRequest.getAllResponseHeaders 方法返回一个字符串,表示服务器发来的所有 HTTP 头信息。

格式为字符串,每个头信息之间使用 CRLF 分隔(回车+换行),如果没有收到服务器回应,该属性为 null。如果发生网络错误,该属性为空字符串。



目录
相关文章
|
6月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
52 2
|
XML SQL JSON
Ajax全面介绍教你怎么使用Ajax
Ajax全面介绍教你怎么使用Ajax
82 0
|
前端开发 JavaScript
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
|
XML 缓存 JSON
关于ajax的知识点
关于ajax的知识点
77 0
|
前端开发
Ajax学习
本文主要讲Ajax学习
104 0
|
JavaScript 前端开发 UED
学习Ajax
一、Ajax优缺点 优点:①页面局部刷新数据,用户体验感好;②所有浏览器都支持,不需下载额外插件;③使用异步方式与服务器通信;④减轻了服务器压力,加快了响应速度,体现ajax是按需获取数据的。
|
XML JavaScript 前端开发
ajax学习小结
ajax学习小结 一、Ajax Asynchronous JavaScript And XML = 异步的 JavaScript 及 XML。 目的:使得整个页面不刷新也能出现效果。
993 0
|
Web App开发 前端开发 JavaScript
Ajax的简单学习
ajax的核心是 XMLHttpRequest html引用外部的时候这些要放在最后 好处如下: 1.加快网页加载速度 2.
895 0
|
前端开发 JavaScript .NET