ajax 简介

2019年9月14日 173次阅读 来源: RickyLong

用途

《ajax 简介》

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

《ajax 简介》

在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对象的一些方法

《ajax 简介》

《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

    原文作者：RickyLong
    原文地址: https://segmentfault.com/a/1190000016238645
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞