ajax 简介

用途

Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复，每次请求都会导致刷新整个页面，用户体验很不好。随着技术的迭代更新，出现了一个名叫ajax(Asynchronous javascript and xml)的技术，一种不用刷新整个页面便可与服务器通讯的办法

在Ajax模型中，数据在客户端与服务器之间独立传输,服务器不再返回整个页面,也就是说不会出现不必要的页面刷新。

还记得form吗？

使用form表单，我们也可以发送ajax请求，我们只需要简单配置一些参数即可, 我们不用手动去实现ajax请求。下面是form的几个相关的属性。

• Method：GET POST等
• action：请求地址

• enctype: 规定在发送表单数据之前如何对其进行编码

  • application/x-www-form-urlencoded : 在发送前编码所有字符（默认）
  • multipart/form-data (<input type='file'>): 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

但是在实际开发中我们很少用到form表单的ajax请求，因为它的可配置性不高，我们一般都是手动封装ajax,或者使用一些库(axios等),下面是原生ajax的一些简单介绍.

原生ajax

ajax对象

XMLHttpRequest和ActiveXObject,由于ie没有前者，所以在ie环境下，我们使用后者，为了实现兼容一般我们像下面这样写。

var xhr = null
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
} else {
    xhr = new ActiveXObject('Microsoft.XMLHttp')
}

ajax对象的一些方法

一般流程我们是调用open、调用send、配合使用onreadystatechange readyState status statusText responseText.如下

xhr.open(method,address, flag)
xhr.setRequestHeader(“label”, “value”)
xhr.send(data)
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && statusText === 'ok') {
        var response = xhr.responseText
    }
}

如果想更详细的了解原生'ajax', 可参考以下链接ajax