###1.ajax  “Asynchronous Javascript And XML”(异步 JavaScript 和 XML)

  使用:

    如不考虑旧版本浏览器兼容性,

      // 第一步创建xhr对象

      var  xhr = new XMLHttpRequest();

      // 第二步,定义状态变化监听函数

      xhr.onreadystatechange  = function(){

        //   第五步   通过xhr对象的readyState属性,判断响应过程的当前活动阶段是否全部完成

        if(xhr.readyState == 4){      //   属性值为0-4   0:未初始化,尚未调用open方法    1:启动,调用open但未调用send  2:发送,调用send但尚未接受到响应 3:接收,已经接受到部分相应数据   4:完成,已经接收到全部数据

          if(xhr.status == 200 || xhr.status == 304 ){

            console.log(xhr.responseText);

          }

        }

      }

      //  第三步    open一个链接

      xhr.open("GET","abc.txt",false)        //   请求类型     请求URL    true为异步

      //  第四步  发送请求

      xhr.send(string / null )       // string只适用于POSR请求

    setRequestHeader() 设置请求头

###2.  xhr对象的相关属性

  responseText:    作为响应主体被返回的文本

  responseXML:   如果响应的内容类型是“text/xml”或"application/xml",这个属性中将保存包含则相应数据的XML DOM 文档。

  status: 响应的HTTP状态(状态码)       成功的状态码为200/304    304表示请求的资源并没有被修改,可以直接使用浏览器中的缓存版本

    即判断响应是否成功需进行如下判断

      if(xhr.status  == 200 || xhr.status == 304){  }

  statusText: HTTP状态的说明

  abort()  :   取消异步请求

###3. HTTP头部信息

  setRequestHeader()      设置请求头部信息  必须在open()方法之后且调用send()之前

  getResponseHeader() 获取指定请求头 
  语法: getResponseHeader(name) 
  getAllResponseHeaders(); 获取所有请求头 
  语法: getAllResponseHeaders( )

  使用:

  //post请求
  obj.onclick= function(){
    var xhr= new XMLHttpRequest();
    var obj = {
      name: 'zhansgan',
      age: 18
    };
    xhr.open("POST", "http://192.168.1.200:8080/php/test.php", true);
    xhr.setRequestHeader("token","header-token-value"); // 可以定义请求头带给后端
    xhr.setRequestHeader("dingyi","header-dingyi-value");
    xhr.send(JSON.stringify(obj)); // 要发送的参数,要转化为json字符串发送给后端,后端就会接受到json对象
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
      }
    }
  };

  //get请求
  obj.onclick= function(){
    var xhr= new XMLHttpRequest();
    // get方法带参数是将参数写在url里面传过去给后端
    xhr.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);
    xhr.setRequestHeader("token","header-token-value");
    xhr.setRequestHeader("dingyi","header-dingyi-value");
    xhr.send();
    xhr.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      console.log(xhr.responseText);
    }
  }

###4. GET请求

   使用get请求经常会出现一个错误,就是查询字符串格式有问题。   因此,查询字符串中每个参数的名称和值都必须使用encodeURLcomponent()进行编码,然后才能放到URL的末尾

      eg:        xhr.open("GET","abc.php?name1=value1&name2=value2",false)

        可定义一个addURLParam()函数

          function addURLParam(url,name,value){

            url += (url.indexOf("?") == -1 ? "?":"&");

            url += encodeURLcomponent(name) + "=" + encodeURLcomponent(value);

            return url;

          }

          url =   addURLParam("abc.php","userName","Tom")

          xhr.open("GET",url,false)

###5. POST请求

###6. async和defer属性

    defer属性(defer属性声明这个脚本中将不会有document.write或dom操作)

      eg:

        <script src="http://xxx.com/path/a.js" defer></script>

    async(html5中新增的异步支持)

      eg :

        var s = document.createElement('script');

        s.async = true;

  1.<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,

    也就是说不等待后续载入的文档元素,读到就加载并执行。

  2.<script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
  3.<script defer src="myscript.js"></script>  有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),

    但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

  4.蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

  defer属性设置为TRUE时,让浏览器加载js脚本时不等脚本加载完成就开始对该脚本之后的其他图片、文本、HTML代码进行加载了,然后让js脚本自己在慢慢加载,然后再执行。

  这种方式加载JS文件能够提高网页的加载速度,特别是对比较大的脚本。

   注意: 

      1、不要在defer型脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

      2、不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

JS—ajax及async和defer的区别的更多相关文章

  1. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  2. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  3. <script>属性async和defer的区别

    async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...

  4. js异步回调Async/Await与Promise区别 新学习使用Async/Await

    Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...

  5. script async 和script defer的区别

    浏览器对js文件的操作主要有两部分:下载和执行: js文件下载在有些浏览器中是并行的,在有些浏览器中是串行的,如:IE8.firefox3.chrome2都是串行下载的: 执行在所有浏览器中默认是阻塞 ...

  6. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  7. js之script属性async与defer

    概念 默认情况下js的脚本执行是同步和阻塞的,但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式,这些都是布尔类型了,没有值,只需要出现在 < ...

  8. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

随机推荐

  1. 团队作业—预则立&&他山之石

    团队作业-预则立&&他山之石 Deadline: 2017.10.24 22:00pm 作业要求 一.确立团队选题,建立和初步熟悉团队git的协作方式.项目后续的代码.文档都要通过gi ...

  2. 17秋 软件工程 团队第五次作业 Alpha

    题目:团队作业--Alpha冲刺 17秋 软件工程 团队第五次作业 Alpha 12次Scrum 第一次Scrum 第二次Scrum 第三次Scrum 第四次Scrum 第五次Scrum 第六次Scr ...

  3. [福大软工] Z班 团队Alpha阶段成绩汇总

    团队成绩汇总表 团队 T1 T2 T3 T4 T5 T6 T7 T8 T9 T10 T11 总分 Dipper 9 85 90 26 42 27.5 120 74 25 111 19 628.5 SW ...

  4. Python虚拟环境笔记

    虚拟环境 为什么需要虚拟环境: 到目前位置,我们所有的第三方包安装都是直接通过pip install xx的方式进行安装的,这样安装会将那个包安装到你的系统级的Python环境中.但是这样有一个问题, ...

  5. 【递推】ZSC1072: 数学、不容易系列之二—— LELE的RPG难题

    思路如下: f(n) = 1, ... , n-2 , n-1, n 前n-2个已涂好后,涂第n-1个即有2种情况: n-1的色与n-2和1的色都不相同,那么n就是剩下的那个色,没有选择. 即就是f( ...

  6. own address as source address

    1222.762730] br0: received packet on nbif0 with own address as source address[ 1222.769697] br0: rec ...

  7. Codeforces Round #542 C. Connect 搜索

    C. Connect time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  8. 设计模式のAdapterPattern(适配器模式)----结构模式

    一.产生背景 这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能.举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器.您将内存卡插入读卡器,再将读卡器插入笔记本,这样就可以通过笔记本 ...

  9. python六十九课——网络编程之TCP协议

    1.1 概述: TCP协议通过三次握手协议将客户端与服务器端连接,两端使用各自的Socket对象.Socket对象中包含了IO流,供数据传输. 即:TCP协议在客户端与服务器端通过Socket组成了I ...

  10. 为什么swift是面向协议的编程--对面向对象机制的改进

    主要目标是提供抽象能力和解决值类型的多态问题 Actually, Abrahams says, those are all attributes of types, and classes are j ...