理解AJAX

栏目: jQuery · 发布时间: 4年前

内容简介:AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。使用AJAX的两个特性只要 readyState 属性发生变化,就会调用相应的处理函数。

先参考MDN的 什么是AJAX

AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

使用AJAX的两个特性

  • 在不重新加载页面的情况下发送请求给服务器。
  • 接受并使用从服务器发来的数据。

AJAX请求过程是什么样的

先看代码

function request(){
    let httpRequest = new XMLHttpRequest();
    //要在函数闭包内创建XHR变量,避免被其他request相互覆盖;
    if(!httpRequest){
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }

    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
}

function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

创建XMLHttpRequest对象

let httpRequest = new XMLHttpRequest();

什么是onreadystatechange

只要 readyState 属性发生变化,就会调用相应的处理函数。

在这个例子中,处理函数为alertContents。要注意的是,函数名后没有参数,因为你把一个引用赋值给了函数,而不是真正的调用了它。下面会讲关于这个处理函数的具体实现。

还有onload()

onreadystatechange顾名思义,每次state变化的时候都会调用被给的函数,如果只想在状态为完成的时候被调用,可以使用onload来代替。

open() 初始化

  • 不管get还是post,都要先open()。
  • 第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。
  • 第二个参数是你要发送的URL。由于安全原因,默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名,否则在调用 open() 方法是会有 “权限被拒绝” 错误提示。一个容易犯的错误是你企图通过 domain.tld 访问网站,而不是使用 www.domain.tld。
  • 第三个参数是可选的,用于设置请求是否是异步的。如果设为 true (默认设置),JavaScript执行会持续,并且在服务器还没有响应的情况下与页面进行交互。

send() 发送

上面的就是一个get情景中,用send()的例子

再提供一个post例子

post要设定相应的request header,调用 setRequestHeader()

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//如果要post就要设定相应的request header
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { //这里定义onreadystatechange前面已经讲过了
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // 请求完毕,做一些处理
    }
}
xhr.send("foo=bar&lorem=ipsum");//正式发送的send()调用

处理onreadystatechange的函数实现

我们知道会把一个函数赋予xhr.onreadystatechange。那么这个函数应该做什么?

首先,函数要检查请求的状态。如果状态的值是 XMLHttpRequest.DONE (对应的值是4),意味着服务器响应收到了并且是没问题的,然后就可以继续执行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    ...
} else {
   ...
}

readyState对应值

  • 0 UNSENT 还没open()
  • 1 OPENED 已经open()了
  • 2 HEADERS_RECEIVED 已经send()了
  • 3 LOADING 获取返回数据中
  • 4 DONE 完成

接下来,检查HTTP响应的 response code。 可能的响应码都已经列在表中 W3C响应码列表 。在下面的例子中,我们通过检查响应码 200 OK 区别对待成功和不成功的AJAX调用。

if (httpRequest.status === 200) {
   ...
} else {
  ...
}

粗略的响应码解释

  • 2XX 成功
  • 3XX 重新导向
  • 4XX 请求有问题
  • 5XX 服务端有问题

一切检查后,那么怎么获取返回数据?

  • httpRequest.responseText – 服务器以文本字符的形式返回
  • httpRequest.responseXML – 以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理

那么经常看到的jquery中的ajax是什么样的?

我们平常用jquery的ajax都是传一个对象,来具体自己想做什么样的请求。

那么实现ajax的时候,也是先要从这传进来的一个对象里面找参数。处理完了以后就用这些得到的参数去做请求就可以了。

粗略的实现

function ajax(options){
    if(window.XMLHttpRequest){
        let xhr = new XMLHttpRequest;
    }else{
        let xhr = new ActiveXObject();//IE6 and oler
    }

    //从option获取一些参数
    let method = options.type || 'GET';
    let dataType = options.dataType || 'application/x-www-form-urlencoded';
    let params = options.data;
    let success = options.success;
    let fail = option.fail;
    ...
    
    //设置onreadystatechange
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
           //call success
        }else{
            //call fail
        }
    }
    
    //正式进行请求
    if(method == 'GET){
        xhr.open('GET',url + '?' + params,true);
        xhr.send();
    }else if(method == 'POST'){
        xhr.open('POST',url, true);
        xhr.setRequestHeader('Content-Type', dataType);
        xhr.send(params);
    }else{
       ...other method handler
    }
}

当然还可以fetch

Fetch 是浏览器提供的原生 AJAX 接口。这里不做过多介绍。

重点 提到的就是fetch请求返回的是一个 Promise ,所以对获取数据处理要用 then()

一些例子

fetch('/data.json')
.then(res => {
  res.text()       // response body (=> 还是返回Promise,需要再then())
  res.json()       // parse via JSON (=> 还是返回Promise,需要再then())
  res.status       //=> 200
  res.statusText   //=> 'OK'
  res.redirected   //=> false
  res.ok           //=> true
  res.url          //=> 'http://site.com/data.json'
  res.type         //=> 'basic'
                   //   ('cors' 'default' 'error'
                   //    'opaque' 'opaqueredirect')

  res.headers.get('Content-Type')
})

参考信息


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

WebKit技术内幕

WebKit技术内幕

朱永盛 / 电子工业出版社 / 2014-6 / 79.00元

《WebKit技术内幕》从炙手可热的HTML5 的基础知识入手,重点阐述目前应用最广的渲染引擎项目——WebKit。不仅着眼于系统描述WebKit 内部渲染HTML 网页的原理,并基于Chromium 的实现,阐明渲染引擎如何高效地利用硬件和最新技术,而且试图通过对原理的剖析,向读者传授实现高性能Web 前端开发所需的宝贵经验。 《WebKit技术内幕》首先从总体上描述WebKit 架构和组......一起来看看 《WebKit技术内幕》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码