一文读懂Ajax|青训营笔记

小熊迪迪
85 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第4天。

前后端分离的开发模式早已成为现在的主流，前端专注于界面布局，而后端提供数据。前后端如何有效交互，是开发者需要考虑的问题，基于此，Ajax应运而生。

什么是Ajax

Ajax定义为异步 JavaScript 和XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

Ajax实际上是下面这几种技术的融合：

  • XHTML和CSS的基于标准的表示技术
  • DOM进行动态显示和交互
  • XML和XSLT进行数据交换和处理
  • XMLHttpRequest进行异步数据检索
  • Javascript将以上技术融合在一起

Ajax重要操作对象

XMLHttpRequest对象是Ajax中最重要的一个对象。使用Ajax更多的是编写客户端代码，而不是服务端的代码。

XMLHttpRequest 工作原理

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据 就写到浏览器上， 因为不是转发的方式，所以是无刷新就能够获取服务器端的数据。

原生JavaScript操作

使用JavaScript编写Ajax一般会有以下几个步骤

  • 创建XMLHttpRequest对象
  • 创建http请求
  • 把文本框的数据发送给http请求的目标
  • 指定回调函数
  • 编写回调函数
  • 发送http请求
  • 回调函数得到http返回的内容，把内容写在div上

创建XMLHttpRequest对象

要创建XMLHttpRequest对象是要分两种情况考虑的：

  • 在IE6以下的版本
  • 在IE6以上的版本以及其他内核的浏览器(Mozilla)等
<script type="text/javascript">
    var httpRequest;
    if(window.XMLHttpRequest) {
        //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
        httpRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
        //在IE6以下的版本
        httpRequest = new ActiveXObject();
    }
</script>

创建http请求

httpRequest.open(String method,String url,boolean asynch,String username,String password)
  • 第一个参数是指定提交方式。(post、get等)
  • 第二个参数是指定要提交的地址是哪。
  • 第三个参数是指定是异步还是同步。(true表示异步，false表示同步)
  • 第四和第五参数在http认证的时候会用到。是可选的。

XMLHTTPRequest属性

XMLHTTPRequest包含两个常用属性：

  • readyState：请求状态readyState一改变，回调函数被调用，它有5个状态 | 请求状态码 |含义 | | --- | --- | | 0 | 未初始化 | | 1 | open方法成功调用以后 | | 2 | 服务器已经应答客户端的请求| | 3 | 交互中。Http头信息已经接收，响应数据尚未接收。| | 4 |完成。数据接收完成|
  • onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
  • responseText：服务器返回的文本内容
  • responseXML：服务器返回的兼容DOM的XML内容
  • status：服务器返回的状态码
状态码含义
200OK
403Forbidden
404Page not found
  • statusText：服务器返回状态码的文本信息

发送http请求

send(content)：发送请求给服务器
  • 如果是get方式，并不需要填写参数，或填写null。
  • 如果是post方式，把要提交的参数写上去。

注意如果是post方式提交，在发送请求之前需要设置请求头

httpRequest.setRequestHeader(String header,String value)

第一个参数为设置的请求类型，一般设置的是content-type，传输数据类型，即服务器需要我们传送的数据类型。常使用值如下：

value含义
application/x-www-form-urlencodedform表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
multipart/form-data需要在表单中进行文件上传时，就需要使用该格式
application/jsonJSON数据格式
application/xmlxml格式
text/plain纯文本格式

完整示例

<script type="text/javascript">

    var httpRequest;
    function checkUsername() {

        if(window.XMLHttpRequest) {
            //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
            httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) {
            //在IE6以下的版本
            httpRequest = new ActiveXObject();
        }

        //创建http请求
        httpRequest.open("POST", "Servlet1", true);

        //因为我使用的是post方式，所以需要设置消息头 消息类型无文件上传
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //指定回调函数
        httpRequest.onreadystatechange = callback;

        //得到文本框的数据
        var name = document.getElementById("username").value;

        //发送http请求，把要检测的用户名传递进去
        httpRequest.send("username=" + name);
    }

    function callback() {

        //判断请求状态码是否是 4数据接收完成
        if(httpRequest.readyState==4) {

            //再判断状态码是否为200 200是成功的
            if(httpRequest.status==200) {

                //得到服务端返回的文本数据
                var text = httpRequest.responseText;

                //把服务端返回的数据写在div上
                var div = document.getElementById("result");
                div.innerText = text;
            }

        }
    }
</script>

JQuery简化操作

从上面的操作不难看出，原生JavaScript操作比较繁琐，我们可以使用JQuery封装好的Ajax函数，简化操作。在使用之前导入JQuery库。

$.ajax()

ajax()方法通过HTTP请求加载远程数据。该方法是jQuery底层AJAX实现。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。

例如：

$.ajax(
       {
          //提交方式
          type: "POST",
          url: "serverlet",
          //data："username="+username,
          // uid为参数的名称，str为值；多个参数写法："{'参数1':'值1','参数2'：'值2',.....}"
          data: {"uid": str}, 
          //发送信息至服务器时内容编码类型
          contentType: "application/json;charset=utf-8",
          //告诉jquery的返回数据格式。
          dataType: "json",
          //成功返回数据msg(格式为dataType设置的格式),并进行相应的页面刷新操作
          success: function (msg) {}
          //出错时响应函数
          error:function(err){}
})

$.post()

post() 方法通过 HTTP POST 请求从服务器载入数据

语法

$.post(
    url,
    data,
    success(response, status, xhr),
    dataType
    )

$.get()

get() 方法通过远程 HTTP GET 请求载入信息。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax

$.get(
    url,
    data,
    success(response,status,xhr),dataType
    )

Vue之Axios

什么是Axios

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。（摘自百度百科）

axios

vue中使用axios需要先import导入axios库

    // 1. 调用 axios 方法得到的返回值是 Promise 对象
    axios({
      // 请求方式
      method: 'GET',
      // 请求的地址
      url: 'url',
      // URL 中的查询参数
      params: {
        id: 1
      },
      // 请求体参数
      data: {}
    }).then(function (result) {
      console.log(result)
    })

返回为Promise对象，可以使用解构赋值，即直接提取想要的值。

      // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
      // await 只能用在被 async “修饰”的方法中
      const { data } = await axios({
        method: 'POST',
        url: 'url',
        data: {
          name: 'zs',
          age: 20
        }
      })

      // 解构赋值的时候，使用 : 进行重命名
      // 1. 调用 axios 之后，使用 async/await 进行简化
      // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
      // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
      const { data: res } = await axios({
        method: 'GET',
        url: 'url'
      })

直接发起请求

同Ajax一样，Axios也可以直接使用get或post方法发起请求。

put方式与post类似

  // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('url', { name: 'zs', gender: '女' })
      console.log(res)

delete与get方式类似

      const { data: res } = await axios.get('url', {
        params: { id: 1 }
      })

总结

使用异步获取数据的方式可以降低前后端代码耦合性，同时也能提高程序效率，在更新数据时，不用全局刷新浏览器，而只是部分刷新。

avatar
文章
阅读
粉丝