ajax的初认识

ajax的概念

什么是ajax

1 Ajax: asynchronous javascript and xml (异步js和xml)

xml 是json 没有出现之前,用于传输前后端数据用的

2 是可以与服务器进行(异步/同步)交互的技术之一

ajax的语言载体是javascript。 最大特点：页面不刷新
ajax的一些常见应用,使网页无刷新向web服务器发送请求数据

 

ajax出现的历史

1999年，微软公司发布IE5浏览器的时候嵌入的一种技术，起初名字是XMLHttp

 直到2005年，google公司发布了一个邮箱产品gmail，内部有使用ajax技术，该事情引起人们对ajax的注意，也使得一蹶不振的javascript语言从此被人们重视起来.

ajax的使用

XMLHttpRequest对象

 浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

GET的使用

例1:在页面中添加一个按钮,点击一次发送一个请求,查看返回值

 <input type="button" value="发送" onclick="fn()">
  <script>
    function fn() {

      //1. 创建一个XMLHttpRequest对象
      var xhr = new XMLHttpRequest();
      //2. 设置请求的类型,以及地址

      xhr.open("get", "http://localhost:8888/test/first");
      //3.发送请求到服务器
      xhr.send(null);
    }
  </script>

请求发送之后的查看

ajax状态

 通过监控请求状态，当状态等于4的时候才能接受数据

xhrObj.onreadystatechange - 监听readyState状态，当状态发生改变可调用对应函数处理

ajax五种状态的作用

xhrObj.readyState - 返回当前请求的状态
   xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
   xhr.readyState = 1时-初始化,对象建立未调用send()
   xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
   xhr.readyState = 3时-数据传输中,接受部分数据
   xhr.readyState = 4时-响应内容解析完成

例:获取ajax请求过程的四种状态

  // 1 实例化对象
      let xhr = new XMLHttpRequest(); 
         xhr.onreadystatechange = function(){
              // 4 使用回调函数检测当前的状态
                    console.log(xhr.readyState);
                    // 获取服务器状态码
                    console.log(xhr.status)
                    // 接受服务器返回数据
                   console.log(xhr.responseText);  
         }
        //  2 创建请求
         xhr.open('get','http://localhost:8888/goods/list');
         // 3 发送请求
         xhr.send();

 

 

onload的使用

 const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:8888/test/first', true)
      xhr.send()
      xhr.onload = function () {
        console.log(xhr.responseText)
      }
      console.log('end')

服务器响应值接收

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据(知道)