ajax的原理及应用

1.介绍

ajax是一种技术方案 ， Asynchronous（异步） JavaScript and XML(用来传输和存储数据，异步JavaScript和XML）

• 使用XHTML+CSS来标准化呈现；
• 使用XML和XSLT进行数据交换及相关操作；
• 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
• 使用Javascript操作Document Object Model进行动态显示及交互；
• 使用JavaScript绑定和处理所有数据。

作用：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.工作原理

3.xmlHttpRequest的原理及应用

XHR 是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求（从后台服务器访问数据）。该 API 是大多数 Ajax 交互的核心，也是现代 Web 开发的一项基本技术。

方法：

属性：

4.ajax的创建

(1)安装浏览器，创建代理（创建XMLHttpRequest对象 ）

if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xhr = new XMLHttpRequest();
    } else {
      // IE6, IE5 浏览器执行代码
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

此时xhr的内容

(2) 打开浏览器，输入网址（向服务器发送请求）

.open(method,url,async)
xhr.open(‘get‘,‘http://127.0.0.1:3000/api/mafengyan?‘,true);

(3) 敲回车键 进行请求
.send(string) method == post 时候的string为发送的数据请求数据

//post 方法设置请求头
 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
 xhr.send();

send可以传递的参数类型

(4)等待响应（服务器响应）

• responseText 属性（获得字符串格式的响应数据)
• responseXML（获得XML格式的响应数据）

(5)查看结果（XMLHttpRequest readyState状态）

• onReadystatechange () 存储函数，每当readyState属性改变时候就会调用该函数
• readyState 状态的返回值

　　  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status ==200){
        var res = xhr.responseText ;
        console.log(res);
        console.log(xhr.getAllResponseHeaders())
        console.log(xhr.getResponseHeader(‘Content-Type‘))
      }
    }

• status的值 就是状态码

　                      1xx:信息响应类，表示接收到请求并且继续处理
　　　　　　　　2xx:处理成功响应类，表示动作被成功接收、理解和接受
　　　　　　　　3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
　　　　　　　　4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
　　　　　　　　5xx:服务端错误，服务器不能正确执行一个正确的请求

<tips-创建ajax的过程>

var xhr;
    //1. 创建XMLHttpRequest 的对象
    if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xhr = new XMLHttpRequest();
    } else {
      // IE6, IE5 浏览器执行代码
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.调用open 
    xhr.open(‘post‘,‘http://127.0.0.1:3000/api/mafengyanRespon‘,true);
    //post 方法 设置头部 
    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
    
    //3 发送数据
    xhr.send(data);
    
    //4.监听接收数据 readyState 
    xhr.onreadystatechange = function(){ 
      if(xhr.readyState == 4 && xhr.status ==200){ 
              console.log(xhr.response)
          
      }
    }

获取response数据：
<xhr.response>

• 默认值：空字符串""
• 当请求完成时，此属性才有正确的值
• 请求未完成时，此属性的值可能是""或者 null，具体与 xhr.responseType有关：当responseType为""或"text"时，值为""；responseType为其他值时，值为 null

<xhr.responseText>

• 默认值为空字符串 ""
• 只有当 responseType 为"text"、""时，xhr对象上才有此属性，此时才能调用xhr.responseText，否则抛错
• 只有当请求成功时，才能拿到正确值。以下2种情况下值都为空字符串""：请求未完成、请求失败

<xhr.responseXML>

• 默认值为 null
• 只有当 responseType 为"text"、""、"document"时，xhr对象上才有此属性，此时才能调用xhr.responseXML，否则抛错
• 只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下3种情况下值都为null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时

判断ajax是否成功返回的条件
　　　xhr.readyState==4 && xhr.status==200的解释：请求完成并且成功返回

if(xhr.readyState == 4 && shr.status ==200){
        console.log("成功");
      }

此时的xhr

<post方法设置请求头>

// post 方式需要设置请求头
 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘
  xhr.send(‘id=3&age=24‘);

方法的第一个参数 header 大小写不敏感，即可以写成content-type，也可以写成Content-Type，甚至写成content-Type;请求头注意点

• Content-Type的默认值与具体发送的数据类型有关
• setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错；
• setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。

method为post的时 不设置头接收不到数据

• ArrayBuffer

data = new ArrayBuffer(512);
    var longInt8View = new Uint8Array(data); 
    for (var i=0; i< longInt8View.length; i++) {
      longInt8View[i] = i % 255;
    }

•   Blob

const BYTES_PER_CHUNK = 1024 * 1024;
  const SIZE = blob.size;
  xhr.setRequestHeader(‘Content-Range‘, start+‘-‘+end+‘/‘+SIZE);
  xhr.send(blob.slice(start, end));

• Document 
• DOMString

• FormData

var forms=new FormData(); 
    forms.append("name","22222");  
// post 方式需要设置请求头
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
 xhr.send(forms);

send的传递类型影响content-type的头部

xhr.send(data)中data参数的数据类型会影响请求头部content-type的默认值：

• • 如果data是 Document 类型，同时也是HTML Document类型，则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8；

• 如果data是 DOMString 类型，content-type默认值为text/plain;charset=UTF-8；

• 如果data是 FormData 类型，content-type默认值为multipart/form-data; boundary=[xxx]

• data是其他类型 则无默认请求头 null blob ArrayBuffer 
  

send不加请求头的时候

不加请求头信息：

增加了请求头部后

<获取头部的信息>

• getAllResponseHeaders：是获取 response 中的所有header 字段
• getResponseHeader：后者只是获取某个指定 header 字段的值

reponseType:用于设置返回值的类型

• 默认不设置

• arraybuffer

• blob

• document

• json

• text

<设置超时的时间>

// 超时时间单位为毫秒
    xhr.timeout = 1000
    // 当请求超时时，会触发 ontimeout 方法
    xhr.ontimeout = () => console.log(‘请求超时‘)

6.代码demo

假装已经安装的node等一系列环境 然后 node 文件名.js

const express = require(‘express‘);
const app = express() 
//导入cors模块,该模块为跨域所用
const cors = require(‘cors‘);
app.use(cors());

//安装body-parser 插件 并进行引用 解析post的数据 不加这个解析不到数据哦
var bodyParser = require(‘body-parser‘);
app.use(bodyParser());
app.use(bodyParser.json());//数据JSON类型
app.use(bodyParser.urlencoded({ extended: false }));//解析post请求数据

//设置方法的请求头
app.all(‘*‘, function(req, res, next) {
  let origin=req.headers.origin;
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ‘ 3.2.1‘);
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
//设置get请求接口
app.get(‘/api/cute‘, (req, res) => {
  console.log(req.query); 
  res.json(req.query)
})
//设置post请求接口
app.post(‘/api/cute‘, (req, res) => {
  console.log(req.body) 
  res.status(200); ;
  res.json(req.body)
})
app.post(‘/api/cuteFile‘, (req, res) => {
  console.log(req.body)  
  res.send(req.body)
  res.end("停止请求");
})
app.get(‘/api/cuteFile‘, (req, res) => {
  console.log(req.query); 
  res.json(req.query)
})
//xml 文件类型
app.post(‘/api/cuteXml‘, (req, res) => {
  var data = ‘<?xml version="1.0" encoding="UTF-8"?><root><tag>text</tag></root>‘;
  res.writeHead(200, {‘Content-Type‘: ‘application/xml‘});
  res.end(data); 
  res.send(data)
  res.end();
})

app.post(‘/api/cuteRespon‘, (req, res) => {
  console.log(req.body) 
  res.json(req.body)
})

//监听服务
app.listen(3000, () => {
  console.log(‘正在监听端口3000‘); 
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./co.css">
</head>
<body>
  <h1 style="text-align:center;">ajax的哪些事儿～</h1>
  <div class="box">
    <h5>form表单提交</h5>
    <form action="http://127.0.0.1:3000/api/cute" method="post">
      <div class="item">
        <label for="name">姓名</label>
        <input type="text" name="username" placeholder="请输入名字" id="name">   
      </div>
      <div class="item">
        <label for="mobile">手机号</label>
        <input type="text" name="mobile" id="mobile" placeholder="请输入手机号">
      </div> 
      <input type="submit" value="form 表单提交">
    </form>
    <input type="submit" value="js提交" onclick="submitMsg1()">
  
  </div>

  <div class="box">
    <h2>send 的数据类型</h2>
    <div class="item">
      <input type="submit" value="Document" onclick="changeSendType(‘Document‘)">
      <input type="submit" value="Blob" onclick="changeSendType(‘Blob‘)">
      <input type="submit" value="ArrayBuffer" onclick="changeSendType(‘ArrayBuffer‘)">
      <input type="submit" value="DOMString" onclick="changeSendType(‘DOMString‘)">
      <input type="submit" value="FormData " onclick="changeSendType(‘FormData‘)">
      <input type="submit" value="null" onclick="changeSendType(‘null‘)">
    </div>
  </div>

  <div class="box">
    <h2>responseType</h2>
    <div class="item">
      <input type="submit" value="默认不设置" onclick="submitMsg()">
      <input type="submit" value="json" onclick="submitMsg(‘json‘)">
      <input type="submit" value="arraybuffer" onclick="submitMsg(‘arraybuffer‘)">
      <input type="submit" value="blob" onclick="submitMsg(‘blob‘)">
      <input type="submit" value="document" onclick="submitMsg(‘document‘)">
      <input type="submit" value="text" onclick="submitMsg(‘text‘)">
    </div> 
  </div>
  <div class="box">
    <h2>封装的ajax</h2>
    <div class="item"> 
      <input type="submit" value="请求" onclick="getdata()"> 
    </div> 
  </div>
  <script src="../js/myajax.js"></script>
  <script >
  //  ajax的big demo
  function submitMsg1(){
      var name = document.getElementById("name").value;
      var mobile = document.getElementById("mobile").value 
      
      var xhr;

      //1. 创建XMLHttpRequest 的对象
      if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
      } else {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      console.log(xhr); 
      //2.发送数据
      var data = ‘name=‘+name+"&mobile="+mobile;
      xhr.open(‘get‘,‘http://127.0.0.1:3000/api/cute?‘+data,true);
      // xhr.responseType = ‘json‘;
      // post 方式需要设置请求头
      xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
      xhr.send(data);
      // console.log("停止请求");
      // xhr.abort(); 

      
      //3.监听接收数据 readyState 
      xhr.onreadystatechange = function(){
        console.log(‘xhr.readyState   ‘+ xhr.readyState)
        console.log(‘xhr.status   ‘+ xhr.status)
       
        if(xhr.readyState == 4 && xhr.status ==200){
          var res = xhr.responseText ;
          console.log(res);
           console.log(‘xhr.responseXMl   ‘+xhr.responseXMl)
            console.log(‘xhr.statusText   ‘+xhr.statusText)
           console.log(‘XMLHttpRequest.responseURL ‘ + xhr.responseURL)
      
          console.log(‘xhr.responseXMl   ‘+xhr.responseXMl) 
          console.log(xhr.getAllResponseHeaders())
          console.log(xhr.getResponseHeader(‘Content-Type‘))
          console.log(xhr) 
        }
      }

      // 超时时间单位为毫秒
      // xhr.timeout = 1
      // 当请求超时时，会触发 ontimeout 方法
      // xhr.ontimeout = () => console.log(‘请求超时‘)
  }

  //sendType
  function changeSendType(type){
    var data;
    switch(type){
      case ‘FormData‘:{
        data=new FormData(); 
        data.append("name","22222");
        console.log(data)
        break;
      }
      case ‘ArrayBuffer‘:{
        data = new ArrayBuffer(512);
        var longInt8View = new Uint8Array(data); 
        for (var i=0; i< longInt8View.length; i++) {
          longInt8View[i] = i % 255;
        } 
        break;
      }
      case ‘DOMString‘:{
        data = ‘name=2&age=34‘;
        break;
      }
      case ‘Blob‘:{
        var blob = new Blob();
        const BYTES_PER_CHUNK = 1024 * 1024;
        const SIZE = blob.size;
        data = blob;
        break;
      }
      case ‘null‘:{
        data = null;
        break;

      }
      case ‘Document‘:{
        data = document.querySelector(".box");
        break;

      }
    }
    submitMsg2(data);
  }
  function submitMsg2(data){ 
    
    var xhr;

    //1. 创建XMLHttpRequest 的对象
    if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xhr = new XMLHttpRequest();
    } else {
      // IE6, IE5 浏览器执行代码
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    xhr.open(‘post‘,‘http://127.0.0.1:3000/api/cuteFile‘,true); 
    // xhr.open(‘get‘,‘http://127.0.0.1:3000/api/cuteFile?‘+data,true); 

    // post 方式需要设置请求头
    // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
    // xhr.setRequestHeader(‘Content-Type‘,‘multipart/form-data; boundary=[XXXX]‘)
  console.log(data);
    xhr.send(data); 
    xhr.onreadystatechange = function(){   
      if(xhr.readyState == 4  && xhr.status == 200){
        console.log(xhr.getAllResponseHeaders())
        console.log(xhr)
        }
    } 
  }
 
  //responseType
  function submitMsg(type){ 
    var xhr;
    //1. 创建XMLHttpRequest 的对象
    if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xhr = new XMLHttpRequest();
    } else {
      // IE6, IE5 浏览器执行代码
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.发送数据
    var data = ‘name=1&mobile=mobile‘;
    // xhr.open(‘post‘,‘http://127.0.0.1:3000/api/cuteRespon‘,true);
    xhr.open(‘post‘,‘http://127.0.0.1:3000/api/cuteFile‘,true);

    xhr.responseType = type;  

    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset=UTF-8‘)
    xhr.send(data);
    //3.监听接收数据 readyState 
    xhr.onreadystatechange = function(){ 
      if(xhr.readyState == 4 && xhr.status ==200){ 
         console.log(xhr) 
      }
    } 
  }
function getdata(){
 
  ajax({
    method:"get",
    url:‘http://127.0.0.1:3000/api/cute‘,
    data:{age:3,name:4},
    success:function(res){
      console.log("请求成功了")
      console.log(res);
      console.log(JSON.parse(res));
    }
  })
   
}

  
  </script>
 

</body>
</html>

 然后进行html文件 太长了 自取～