码迷,mamicode.com
首页 > Web开发 > 详细

ajax的原理及应用

时间:2020-01-17 21:07:08      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:mit   bre   nta   control   产生   response   不可用   anr   style   

 

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 开发的一项基本技术。

方法:

abort()

停止当前请求 

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")

返回指定首部的串值

open("method","URL",[asyncFlag],["userName"],["password"]) 

建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码

send(content)

向服务器发送请求

setRequestHeader("header", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post‘方法一定要 )

onreadystatechange

状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数


属性:

  属  性

描    述

readyState

请求的状态。有5个可取值:
0 = 未初始化,对象已经创建
1 = 正在加载 open 方法已经成功调用 但send方法未调用
2 = 已加载 send方法已经调用 尚未开始接收数据
3 = 交互中 正在接受数据 Http响应头信息已经接受 但尚未接受完成
4 = 完成 响应数据接收完成

responseText

服务器的响应,返回数据的文本。

responseXML

服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。

responseBody 

服务器返回的主题(非文本格式)

responseStream

服务器返回的数据流

status

服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)

statusText

服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)

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‘)) } }

 

0

请求未初始化(还没有调用 open())

1

服务器连接已建立但是还没有发送(还没有调用 send())

2

请求已接收通常现在可以从响应中获取内容头)

3

请求处理中

4

请求已完成,且响应已就绪

技术图片

  • status的值 就是状态码

 

                     100——客户必须继续发出请求
        101——客户要求服务器根据请求转换HTTP协议版本
        200——交易成功
        201——提示知道新文件的URL
        202——接受和处理、但处理未完成
        203——返回信息不确定或不完整
        204——请求收到,但返回信息为空
        205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
        206——服务器已经完成了部分用户的GET请求
        300——请求的资源可在多处得到
        301——删除请求数据
        302——在其他地址发现了请求数据
        303——建议客户访问其他URL或访问方式
        304——客户端已经执行了GET,但文件未变化
        305——请求的资源必须从服务器指定的地址得到
        306——前一版本HTTP中使用的代码,现行版本中不再使用
        307——申明请求的资源临时性删除
        400——错误请求,如语法错误
        401——请求授权失败
        402——保留有效ChargeTo头响应
        403——请求不允许
        404——没有发现文件、查询或URl
        405——用户在Request-Line字段定义的方法不允许
        406——根据用户发送的Accept拖,请求资源不可访问
        407——类似401,用户必须首先在代理服务器上得到授权
        408——客户端没有在用户指定的饿时间内完成请求
        409——对当前资源状态,请求不能完成
        410——服务器上不再有此资源且无进一步的参考地址
        411——服务器拒绝用户定义的Content-Length属性请求
        412——一个或多个请求头字段在当前请求中错误
        413——请求的资源大于服务器允许的大小
        414——请求的资源URL长于服务器允许的长度
        415——请求资源不支持请求项目格式
        416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
        417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
        500——服务器产生内部错误
        501——服务器不支持请求的函数
        502——服务器暂时不可用,有时是为了防止发生系统过载
        503——服务器过载或暂停维修
        504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
        505——服务器不支持或拒绝支请求头中指定的HTTP版本

 

                       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文件 太长了 自取~

ajax的原理及应用

标签:mit   bre   nta   control   产生   response   不可用   anr   style   

原文地址:https://www.cnblogs.com/mfyngu/p/12207280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!