ajax通信 ajax事件 跨域 GET和POST

1.AJAX基础

• AJAX 异步的 javascript XML(数据传输格式)。

  • 异步的 JavaScript 和数据传输。
  • 注】ajax 是前后端数据交互的搬运工，都可以异步执行。
  • 【注】ajax可以实现不刷新加载数据。

• xml数据传输格式 （大型门户网站 新浪 网易 凤凰网等）

  • 优点：1.种类丰富 2.传输量大。
  • 缺点：1.解析麻烦 2.不太适合轻量级数据。

• json数据传输格式（字符串） 95%移动端应用。

  • 优点：1.轻量级数据。2.解析比较轻松。
  • 缺点：1.数据种类比较小。2.传输数据比较少。

• JSON.parse() ------->json格式转对象

• JSON.stringify() ------->转json字符串

• Ajax技术核心是XMLHttpRequest对象(简称XHR)。

• XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。

2.XMLHttpRequest标准

• XMLHttpRequest标准又分为Level 1和Level 2。

• XMLHttpRequest Level 1主要存在以下缺点：

  * 受同源策略的限制，不能发送跨域请求；
  * 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
  * 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；
  

• 那么Level 2对Level 1 进行了改进，XMLHttpRequest Level 2中新增了以下功能：

  * 可以发送跨域请求，在服务端允许的情况下；
  * 支持发送和接收二进制数据；
  * 新增formData对象，支持发送表单数据；
  * 发送和获取数据时，可以获取进度信息；
  * 可以设置请求的超时时间；
  

3.ajax通信

• 我们与服务器通信的API就是XMLHttpRequest。
• 那么我们都需要那些步骤来通信呢，简单理解一共只有4步。
  1、新建XMLHttpRequest对象
  var request=new XMLHttpRequest();
  IE 7以下 var request=new ActiveXObject(“Microsoft.XMLHTTP”);
  2、打开要发送的地址通道。
  request.open(“GET”,地址，同步/异步)；
  3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态
  request.addEventListener(“load”,侦听函数)发送数据给打开的地址，
  4、如果没有要发送的内容直接send（）
  request.send();

    var xhr
    try{
        xhr=new XMLHttpRequest();
    }catch(error){
        xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE7
    }
    xhr.addEventListener("load",loadHandler);
    xhr.open("POST","http://localhost:4006");
    xhr.send('{"user":"wang","age":30}');
    //open方法参数： 
    //Method  GET POST PUT DELETE
    // URL GET时带参数，POST不带参数，如果希望每次请求都是最新的就需要加时间戳
    // URL地址中通过目录方式带入请求的类型
    // async  默认是true，异步。如果设置false，是同步，不需要事件侦听（开发过程中禁止使用同步）
    // user  password  访问地址的用户名密码

    function loadHandler(e){
        conle.log(xhr.response)
    }

4.http请求头和send ( )

1.http请求头

var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("GET","http://10.9.65.239:4006?user=wang&age=30");
// 这个请求头是让PHP可以解析当前的POST数据
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// xhr.setRequestHeader("abc","3");   //自定义响应头
//GET方式允许发送自定义消息头，POST不允许
// 发送自定义消息头时，必须在服务端设置响应头跨域同意Access-Control-Allow-Headers："*"
xhr.send();
// setRequestHeader 设置头部属性，必须在open以后，send以前写入

function loadHandler(e){ 
    console.log(xhr.getAllResponseHeaders());
}

• 获取所有响应头 xhr.getAllResponseHeaders()；
• 获取指定的响应头 xhr.getResponseHeader(“content-type”)；

2.send() 发送请求

• 发送请求。 如果该请求是异步模式(默认),该方法会立刻返回。 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回。

• 【注】客户端：获取响应头 服务端：写入请求头 。

  【注】 所有相关的事件绑定必须在调用send()方法之前进行。
  void send()；
  void send(ArrayBuffer data);类型化数组
  void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
  void send(Document data); 文档对象
  void send(DOMString? data); 文本数据
  void send(FormData data); 数据对象，可以直接封装内容。
  示列：
  var form=document.querySelector("form");
  form.addEventListener("submit",submitHandler);
  function submitHandler(e){
      e.preventDefault();
      var xhr=new XMLHttpRequest();
      xhr.addEventListener("load",loadHandler);
      xhr.open("POST","http://localhost:4006");
      xhr.send(new FormData(form));
  }
  
  function loadHandler(e){
  
  } 
  

5.ajax事件

• loadstart 事件

  • 当程序开始加载时，loadstart 事件将被触发。也适用于 img>和 video 标签元素。

• .Progress 事件

  • 进度事件会被触发用来指示一个操作正在进行中。
  • loaded 当前加载字节
  • total 总字节

• abort事件

  • 当一个资源的加载已中止时，将触发 abort事件。

• error事件。

  • 当一个资源加载失败时会触发error事件。

• load事件

  • 当一个资源及其依赖资源已完成加载时，将触发load事件

• timeout 超时事件 超时时间：request.timeout

  • request.timeout = 2000;
  • 一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。超时并不应该用在一个 document environment 中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。当超时发生， timeout 事件将会被触发。
  • 必须设置在open以后，send之前。
  • 当进度由于预定时间到期而终止时，会触发timeout 事件。

  var time=0;
  function ajax(){
      var xhr=new XMLHttpRequest();
      xhr.addEventListener("load",loadHandler);
      xhr.addEventListener("timeout",timeoutHandler);
      xhr.open("GET","http://localhost:4006?user=wang&age=30");
      // 超时时间
      xhr.timeout=2000;
      xhr.send();
  }
  // 超时事件
  function timeoutHandler(e){
      if(time<3) ajax();
      else this.abort();//中止加载
  }
  

• readystatechange 事件

  • readyState属性
    

  • 当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

  • 状态主要分
    1、 信息 100-101
    2、成功 200-206
    3、重定向 300-307
    4、客户端错误 400-417
    5、服务器错误 500-505

  • readyHandler事件 准备状态

    var xhr=new XMLHttpRequest();
    xhr.addEventListener("readystatechange",readyHandler);
    xhr.open("GET","http://localhost:4006?user=wang&age=30");
    xhr.send();
    
    function readyHandler(e){
        // xhr.status 响应消息的状态
        if(xhr.readyState===4 && xhr.status===200){
            console.log(xhr.response);
        }
    } 
    // %E4%BD%A0%E5%A5%BD URI编码格式
    // console.log(encodeURIComponent("你好"));//转换为URI编码格式
    // console.log(decodeURIComponent("%E4%BD%A0%E5%A5%BD"));//将URI编码格式转为字符
    

• loadend 事件。

  • 当一个资源加载进度停止时 (例如，在已经分派“错误”，“中止”或“加载”之后)，触发loadend事件。这适用于例如 XMLHttpRequest调用, 以及或元素的内容。

• loaded 已加载。

  • total 总计数据。

• 学习：ajax的封装。

5.跨域

1. cors跨域解决

   • 在服务器端处理，客户端不处理。

     res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"*"});
     //头部消息中加入"Access-Control-Allow-Origin":"*"，
     表示任何域可以访问。如果需要指定域，就改成对应的地址就可以了。
     // *  表示任何人都可以访问。
     // 如果允许谁访问，将*换成指定的域名。
     

2. jsonp跨域

   • 起始JSONP并不是通过AJAX实现，而是通过script标签的加入。

   • 跨域.html

     var script=document.createElement("script");
     script.src="http://localhost:4008?a=3&b=4";
     document.body.appendChild(script);
       // 如果script的src指向服务端，服务端中write内容将是这个script执行的脚本(语句)
     
     function getRes(res){        //getRes 服务端写入内容
         console.log(res);
     } 
     

   • main.js 服务器

     var http=require("http");
     var querystring=require("querystring");
     var server=http.createServer((req,res)=>{
         req.on("data",_data=>{
             
         });
         req.on("end",()=>{
             var obj=querystring.parse(req.url.split("?")[1]);
             res.writeHead(200,{"content-type":"text/html;charset=utf-8"});
             // res.write("var a=3;");
             // res.write("var b=4;"); 
             // res.write("console.log(a+b);");    //执行  客户也能打印7
             var sum=Number(obj.a)+Number(obj.b)
              res.write("getRes("+sum+")");   //getRes("+sum+")  写入script
             res.end();
         })
     });
     server.listen(4008);
     

   • 百度搜索提示案列

     script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=name&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";//name
     /*function callback(obj) {
     	console.log(obj);
     }*/
     

3. websocket（待补充）

   • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
   • 在第一次通信的时候，先把一个允许通信XML发给服务端，服务端接收到内容，如内容可行，就可以通信了。
   • 原理同跨域策略文件：crossdomain.xml 。 允许多个服务通信。

4. 正向代理和反向代理。（待补充）

   • 代理：服务器像服务器请求 不需要跨域，多个服务器之间的请求，中间的服务器就是代理。
   • 【注】服务器像服务器请求 ，不需要跨域。

6.GET和POST

1. get请求

   • GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查 询字符串参数追加到 URL 的末尾，以便提交给服务器。
   • 通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理 。

2. POST请求

   • POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。
     xhr.open(‘post’, ‘demo.php’, true);而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提 交数据。
   • xhr.send(‘name=Lee&age=100’);
   • 一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。
   • xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
   • 【注】：从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET 最多 比 POST 快两倍。

补充：GET和POST的区别

1. GET是从服务器上获取数据，POST是向服务器传送数据。
2. GET把参数包含在URL中，POST通过request body传递参数。
3. 对于GET方式，服务器端用Request.QueryString获取变量的值，对于POST方式，服务器端用Request.Form获取提交的数据。
4. GET传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍GET和POST的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
5. GET安全性非常低，POST安全性较高。
6. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
   是向服务器传送数据。
7. GET把参数包含在URL中，POST通过request body传递参数。
8. 对于GET方式，服务器端用Request.QueryString获取变量的值，对于POST方式，服务器端用Request.Form获取提交的数据。
9. GET传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍GET和POST的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
10. GET安全性非常低，POST安全性较高。
11. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
12. GET请求只能进行url编码，而POST支持多种编码方式。