设计模式 numpy selenium haskell build flexbox routes ldap vb6 rss ionic framework LimeJS mac虚拟打印机 删除数组第一个元素 pr序列设置哪个好 python模块 python取随机数 java9 java时间戳转日期 java创建集合 java连接mysql的jar包 java截取 摩斯密码翻译 圆形截图 dvwa安装教程 pmbok第六版 视频md5修改器 微信临时链接多久失效 微信公众号点餐系统 java表白代码 js取余数 抠图教程 文件批量更名 pp安卓助手 联盟练级路线 画图橡皮擦怎么放大 惠普打印机怎么加粉 pyodbc 坐标反算 python去掉空格
当前位置: 首页 > 学习教程  > 编程语言

ajax通信 ajax事件 跨域 GET和POST

2020/8/11 19:37:15 文章标签:

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支持多种编码方式。

本文链接: http://www.dtmao.cc/news_show_100144.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?