美文网首页
ajax的底层实现和请求的过程

ajax的底层实现和请求的过程

作者: 风雅欢乐 | 来源:发表于2020-04-29 20:58 被阅读0次

ajax实现的核心是XMLHttpRequest对象,该对象有个事件onreadystatechange,每次状态改变都会触发,通过监听该事件触发时的状态可以判断异步请求到了哪一步。

XMLHttpRequest对象的属性:

  1. readyState: 请求状态,开始请求时值为0,直到请求完成时,这个值增长到4
  2. responseText: 目前为止接收到的响应体,readyState < 3时,此属性为空字符串,=3时为当前响应体,=4时则为完整响应体
  3. responseXML: 服务端响应,解析为xml并作为document对象返回
  4. status: 服务器端返回的状态码,200表示成功,404表示Not Found
  5. statusText: 用名称表示的服务器端返回状态,200为OK, 404为Not Found

XMLHttpRequest对象的方法:

  1. setRequestHeader(): 向一个打开但是未发送的请求设置头信息
  2. open(): 初始化请求参数,但不发送
  3. send(): 发送http请求
  4. abort(): 取消当前请求
  5. getAllResponseHeaders(): 把http响应头作为未解析的字符串返回
  6. getResponseHeaders(): 返回http响应头的值

readyState的值包括:

  • 0(未初始化),XMLHttpRequest对象已创建,但还没有调用open()方法
  • 1(载入),已调用open()方法,但是请求还未发送
  • 2(载入完成),请求已经发送完成
  • 3(交互),已经接收到部分响应数据
  • 4(完成),已经接收到全部数据,并且连接已关闭

使用ajax发送数据有5个步骤

第一步: 创建异步请求对象
第二步: 设置请求行(请求方式、请求url)
第三步: 设置请求头
第四步: 设置请求体
第五步: 设置响应状态变化监听函数

代码:

// 第一步
var xhr = new XMLHttpRequest();
//  第二步
xhr.open('post', 'validate.php');
// 第三步
// get请求不需要设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 第四步
xhr.send('name=' + value + '&age=12');
// 第五步
// 成功的响应有两个条件
// 1. 服务器成功响应了;
// 2. 异步对象的状态为4
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        console.log(xhr.responseText);
    }
}

相关文章

  • ajax的底层实现和请求的过程

    ajax实现的核心是XMLHttpRequest对象,该对象有个事件onreadystatechange,每次状态...

  • ajax

    定义和用法: ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。...

  • PHP 和 Ajax

    Php代码 收藏代码 ajax通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高...

  • ios开发防止App被抓包(可正常请求)

    实现iOS应用底层所有网络请求拦截(如ajax请求拦截),包含http-dns解决方法,有效防止DNS劫持,用于分...

  • ios开发防止App被抓包

    实现iOS应用底层所有网络请求拦截(如ajax请求拦截),包含http-dns解决方法,有效防止DNS劫持,用于分...

  • XMLHttpRequestjQuery.ajax(url,[s

    (重要知识点) 通过 HTTP 请求加载远程数据。(优点:比较方便使用) jQuery 底层 AJAX 实现。简单...

  • Ajax的步骤及其原理

    ajax是实现前端异步请求非常重要的方法。 下面列出ajax的全部参数 Ajax原理和XmlHttpRequest...

  • 前端ajax实现和跨域实现

    下面是用chrome实现ajax请求,并对ajax中get和post请求进行封装,最后对跨域请求的前端处理本文用的...

  • Ajax异步请求[17.7.10]

    Ajax异步请求 Ajax全称为Asynchronous Javascript and XML。通过Ajax实现了...

  • ajax

    ajax() ajax的实现 $.ajax({ //发送请求地址(默认当前页地址) url:String, //请...

网友评论

      本文标题:ajax的底层实现和请求的过程

      本文链接:https://www.haomeiwen.com/subject/hhfowhtx.html