标签分类
技术文章
当前位置:主页 > 计算机编程 > javascript > Ajax高级笔记 JavaScript高级程序设计笔记

JavaScript高级程序设计笔记分享

  • 发布时间:
  • 作者:码农之家原创
  • 点击:166

Ajax高级笔记 JavaScript高级程序设计笔记

这篇文章主要知识点是关于Ajax高级笔记, JavaScript程序设计笔记,Ajax高级笔记 JavaScript高级程序设计笔记,的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

你不知道的JavaScript 下卷
  • 类型:JavaScript大小:7 MB格式:PDF出版:人民邮电出版社作者:凯尔
立即下载

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

Ajax通信与数据格式无关,从服务器获取的数据不一定是XML数据。

Ajax的核心:XMLHttpRequest对象(简称XHR)

在XHR对象之前,Ajax通信通常使用hack手段,如使用隐藏的或内嵌的框架。

XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。

1.XMLHttpRequest对象

IE5是第一款引进XHR对象的浏览器,通过MSXML库中的ActiveX对象实现(有3个版本)。

  兼容所有浏览器,创建XHR对象:

 

function createXHR(){
  if (typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined"){
    if (typeof arguments.callee.activeXString != "string"){
      var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
              "MSXML2.XMLHttp"],
        i, len;
  
      for (i=0,len=versions.length; i < len; i++){
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (ex){
          //skip
        }
      }
    }
  
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

之后就能在所有浏览器创建XHR对象:var xhr = createrXHR();

2.原生XHR对象 (支持的浏览器: IE7+、FF、Chrome、Opera、Safari)

通过XMLHttpRequest构建函数,创建XHR对象:

var xhr = new XMLHttpRequest();

3.XHR用法

3-1.open()

open() 3个参数: 发送的类型、请求的URL、表是否异步的布尔值

xhr.open("get","example.php", false);

①URl为相对于执行代码的当前页,或绝对地址;

②false为同步,JavaScript代码会在服务器响应后再继续执行;

③调用open()只是启动一个请求以备发送,还没真正发送;

④只能在同个域中使用相同端口和协议的URL发送请求。

3-2.send()

send() 1个参数: 请求主体发送的数据,不需要通过请求主体发送数据则传入null。

调用send()后,请求被分派到服务器。

xhr.open("get","example.php", false) ;
xhr.send(null);

3-3. 收到响应后,响应数据会自动填充XHR对象的属性:

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

responseXML:若响应的内容类型”text/xml”或”application/xml”,此属性保存响应数据XML DOM文档

status:响应的HTTP状态;

statusText:HTTP状态的说明。

☆:无论什么内容类型,响应主体的内容都会保存在responseText属性中。对于非XML数据,responseXML属性值为null。
3-4.status属性确认响应是否成功返回

HTTP状态代码:

200:响应有效,responseText属性已就绪,内容类型正确下的responseXML也可访问。

304:响应有效,只是请求的资源并为修改,可直接使用浏览器中缓存的版本。

正确检查上述2种状态代码:

status判断

 if ((xhr.status >= 200 && xhr.status <=300) || xhr.status == 304) {
   alert(xhr.responseText);
} else {
   alert("Request was unsuccessful:" + xhr.status);
};

3-5.readystate属性

该属性存储 请求/响应过程的 当前活动状态。

0 : 未初始化,未调用open();
1 : 启动,调用了open();
2 : 发送,调用了send(),未接受响应;
3 : 接受,已接受部分响应;
4 : 完成,已接受全部响应,且可在客户端使用。

3-6.readystatechange事件

该事件,在readystate属性值改变时触发。

readystatechange事件句柄

var xhr = createXHR();
xhr.onreadystatechange = function(event){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

①必须在调用open()之前知道readystatechange事件的事件处理程序,确保兼容。

②该事件处理程序中没有传递event对象,必须通过XHR对象本地来确定下一步怎么做;

③使用xhr对象而不使用this对象,是因为onreadystatechange事件处理程序的作用域问题。使用this对象在一些浏览器会导致函数执行失败或发生错误。

3-7.abort()

调用此方法可取消异步请求:xhr.abort();

调用后,xhr对象停止触发事件,不允许访问如何与响应相关的属性;

终止请求后,应对XHR对象进行解引用操作,不建议重用XHR对象。

4、HTTP头部信息

发送请求时的头部信息:

Accept:浏览器能够处理的内容类型

Accept-Charset:浏览器能够显示的字符集

Accept-Encoding:浏览器能够处理的压缩编码

Axxept-Language:浏览器当前设置的语言

Connection:浏览器与服务器之间连接的类型

Cookie:当前页面设置的如何Cookie

Host:发送请求耳洞页面所在域

Referer:发出请求的页面的URI

User-Agent:浏览器的用户代理字符串

setRequestHeader()

设置自定义头部信息。

2个参数:头部字段名称、头部信息值。

需在open()方法之后调用send()之前调用setRequestHeader(),才能成功发送请求头部信息。

自定义HTTP头部信息

var xhr = createXHR();    
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

getRequestHeader()

获取指定的相应头部信息

xhr.getRequestHeader(“MyHeader”);
getAllRequestHeader()

获取一个包含所有头部信息的长字符串

xhr.getAllRequestHeader();

5、GET请求

  对于XHR对象,位于opne()的URL末尾的查询字符串 需经过编码,使用encodeURIComponent()编码。

  名-值对需用和号(&)分隔。

  自定义函数,添加URL查询字符串参数:

function addURLParam(url,name,value){
  url += (url.indexOf('?') == -1?'?':'&');
  url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
  return url;
}

6、POST请求

  长用于想服务器发送要保存的数据。

  由于XHR其初的设计是为了处理XML,故在send(0中可传入XHR DOM文档。

6-1.服务端读取POST数据

  ①默认情况下,服务器对POST请求和提交Web表单不会一视同仁,故服务端需要程序来读取发送的原始数据,并解析出有用部分。

  ②XHR模拟表单提交:

    1.将Content-Type头部信息设置为application/x-www-form-urlencoded (即表单提交时的内容问题);

    2.以适当格式创建一个字符串。(通过serialize()函数创建该字符串,序列化表单数据)

XHR模拟表单提交

function submitData(){
  var xhr = createXHR();    
  xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
    }
  };

  

  xhr.open("post", "postexample.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var form = document.getElementById("user-info");      
  xhr.send(serialize(form));
}

 7、CORS 跨源资源共享(IE8+、FF、Chrome....)

  跨域安全策略限制了Ajax的异步通信,CORS则是定义了跨域时,客户端和服务器的沟通。

  CORS思想:使用自定义HTTP头部让浏览器与服务器进行沟通,从而决定请求/响应的成功与否。

7-1.给一个请求附加Origin头部,包含请求页面的源信息(协议、域名 和 端口)

Origin: http://www.domain.com

服务器根据Origin判断是否接收请求,接收则在Access-Control-Allow-Origin头部会发相同信息。

    (若是公共资源,可以回发"*")

Access-Control-Allow-Origin: http://www.domain.com

若无此头部或头部信息不匹配,浏览器将驳回请求。

☆请求和响应不会包含cookie信息。

7-2.IE8+对CORS的实现

  IE8引入的XDR(XDomainRequest)类型,类型XHR,可实现安全可靠的跨域通信。

7-2-1.XDR与XHR的不同之处:

  ①cookie不会随请求发送,也不会随响应返回;

  ②只能设置请求头部信息中的Content-Type字段;

  ③不能访问响应头部信息;

  ④只支持GET和POST请求

XDR缓解了CSRF(跨站请求伪造)和XSS(跨站点脚本)问题

被请求的资源可判断用户代理、来源页面等如何数据 来决定是否设置Access-Control-Allow-Origin头部

7-2-2. XDR使用方法类似XHR,创建一个XDomainRequest实例,调用open(),再调用send()。

  XDR只能执行异步请求,所以open()方法只有两个参数,请求的类型和URL。

  在收到响应后,只能访问响应的原始文本,无法确定响应的状态代码。

  只要响应有效就会触发load事件,响应的数据会保存在responseText属性中。

  如果失败(如,响应中缺少Access-Control-Allow-Origin头部)就会触发error事件,但该事件无有用信息,需要自定义一个onerror事件句柄。

obload事件-onerror事件

var xdr = new XDomainRequest();
xdr.onload = function(){
  alert(xdr.responseText);
};
xdr.onerror = function(){
  alert("Error!");
};

xdr.open("get", "http://www.somewhere-else.com/xdr.php");
xdr.send(null);

在请求返回前调用abort()可终止请求。

7-2-3.XDR也支持timeout属性及ontiomout事件处理程序,在运行超过timeout设定的秒数后,调用ontimeout事件句柄。

  为支持POST请求,XDR提供了contentType属性,用于表示发送数据的格式。

    contentType属性是XDR对象影响头部信息的唯一方式。

xdr.contentType = "application/x-www-form-urlencoded";

7-3其他浏览器对CORS的实现

  FF等浏览器都通过XMLHttpRequest对象实现了对CORS的原生支持。要请求另一个域中的资源时,使用标准XHR对象并在open()中传入绝对URL即可。

标准XHR的跨域

var xhr = createXHR();    
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "http://www.abc.com/page/", true);
xhr.send(null);

与IE不同,通过跨域XHR对象可以访问status属性和statusText属性,也可同步请求。

7-3-1.跨域XHR的限制:

  ①不能使用setRequestHeader()设置自定义头部;

  ②不能发送和接收cookie;

  ③调用getAllResponseHeader()方法总会返回空字符串。

7-3-2.无论同源请求还是跨域请求都是使用相同的接口,故对于本地资源,最好用相对URL,对远程资源再用绝对URL。

  这样能消除歧义,避免出现限制访问头部或本地cookie信息等问题。

7-4、跨浏览器的CORS(IE8+、FF等)

  检测XHR是否支持CORS的方法:检查是否存在withCredentials属性,在结合检测XDomainRequest对象是否存在。

CORS跨域兼容

function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");
if (request){
  request.onload = function(){
    //do something with request.responseText
  };
  request.send();
}

上述createCORSRequest()函数返回的对象的属性(XHR和XDR的共同属性):

  ①abort():停止正在进行的请求;

  ②onerror:用于替代onreadystatechange检测错误;

  ③onload:用于代替onreadystatechange检测成功;

  ④responseText:用于取得响应内容;

  ⑤send():用于发送请求。

8、其他跨域技术

  在CORS出现前,常利用DOM中能够执行跨域请求的功能,在不依赖XHR对象时,也能发送某种请求。

  与COSR不同的是,不用修改服务器代码。

8-1.图像Ping

  使用<img>标签,由于可以从任何网页加载图像,故常是在线广告跟踪浏览量的只要方式。

  可动态创建图像,使用它们的onload和onerror事件句柄,确定是否接受到了响应。

var img = new Image();
img.onload = img.onerror = function(){
  alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas"; 

图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据通过查询字符串形式发送,响应可以是任何内容,通常是像素图或204响应。虽然通过图像Ping,浏览器得不到任何具体数据,但通过侦听load和error事件,能找到响应收到的时间。

  图像Ping常用于跟踪用户点击页面 或动态广告曝光次数。

  缺点:①只能发送GET请求;②无法访问服务器响应文本。

8-2.JSONP

  JSONP(JSON width Padding)填充式JSON或参数式JSON,类似JSON,是包含在函数调用中的JSON:

callback( {"name" : "value"} );
8-2-1.JSONP有两个部分:回调函数 和 数据

  回调函数:当响应到来时应该在页面中调用的函数。回调函数的名称在请求中指定。

  数据:传入回调函数的JSON数据。

8-2-2.JSONP通过动态<script>元素,为其src属性指定一个跨域的URL。类似<img>元素,即都能不受限制地跨域加载资源。

  JSONP为有效的JavaScript代码,在请求完成即JSONP响应 加载到页面后就会立即执行。

function handleResponse(response){
  alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

headleResponse()为回调函数,将在响应到来后执行。

8-2-3.JSONP之所以流行,是因为 :

    ①能够直接访问响应文本;

    ②支持浏览器与服务器之间的双向通信。

  不足:

    ①JSONP从其他域加载代码执行,因此该域必须安全可靠;

    ②很难确保JSONP请求是否失败。

8-3Comet ”服务器推送" 【不兼容IE】

  Ajax从页面想服务器请求数据,Comet则是服务器向页面推送数据,Comet能近乎实时地向页面推送信息。

8-3-1.实现Comet的2种方式:长轮询 和 流

  ①长轮询:与短轮询相反,页面发送一个请求,服务器一直保持连接打开,直到有数据可发送时就向页面发送数据。接收完数据后浏览器关闭连接,随机又发送一个新请求,在页面打开期间如此循环...

  【短轮询是服务器立即发送数据,即使数据无效,长轮询是等待发送响应。】

  轮询的优点是,所有浏览器都支持。通过XHR对象和setTimeout()实现。

  ②HTTP流:它在网页的整个生命周期内只使用一个HTTP连接。浏览器发送一个请求,服务器保持连接打开,再周期性向浏览器发送数据.

PHP例子

<?php
  $i = 0;
  while (true) {
    //输出一些数据,然后刷新输出缓存
    echo "Number is $1";
    flush();

    //等几秒
    sleep(10);

    $++;
  }
...

实现HTTP流的关键:所有服务器端语言都支持打印到输出缓存然后刷新的功能。(将输出缓存中的内容一次性全部发送给客户端)

使用XHR实现HTTP流的典型例子

var xhr = new XMLHttpRequest(),
  received = 0;
  
xhr.open("get", url, true);
xhr.onreadystatechange = function(){
  var result;
  
  if (xhr.readyState == 3){
  
    //get only the new data and adjust counter
    result = xhr.responseText.substring(received);
    received += result.length;
    
    //call the progress callback
    progress(result);
    
  } else if (xhr.readyState == 4){
    finished(xhr.responseText);
  }
};
xhr.send(null);
return xhr;
}

var client = createStreamingClient("streaming.php", function(data){
      alert("Received: " + data);
     }, function(data){
      alert("Done!");
     });

以上就是码农之家小编为大家分享的Ajax高级笔记的相关内容,对于学习ajax的朋友应该是个不错的入门讲解。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到儿童python编程入门书籍推、 解决axios.interceptors.respon、 vue项目中使用md5加密以及、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:没有了

下一篇:JS正则验证多个邮箱完整的代码实例

展开 +

收起 -

学习笔记
网友NO.747808

javascript中关于类型判断的一些疑惑小结

前言 类型判断是我们在日常工作中经常会遇到的一个功能,本文将给大家详细介绍关于javascript类型判断的相关内容,下面话不多说了,来一起看看详细的介绍吧 Javascript中数据类型分为两种: 简单数据类型:Undefined, NULL, Boolean, Number, String 复杂数据类型:Object 接下来我们就来看看怎么做数据类型判别吧? 首先来看看 typeof Type Result Undefined "undefined" Null "object" (see below) Boolean "boolean" Number "number" String "string" Symbol (new in ECMAScript 2015) "symbol" Host object (provided by the JS environment) Implementation-dependent Function object (implements [[Call]] in ECMA-262 terms) "function" Any other object "object" 来点code demo吧 let a = undefined;typeof a"undefined"let b = false;typeof b"boolean"let c = 12;typeof c"number"let d = '12';typeof d"string"let f = function () {};typeof f"function" 接下来我们就来看看那些奇怪的现象吧 let str = new String('abc');typeof str"object"let num = new Number(12);typeof num"object"var func = new Function();typeof func; "function"typeof null"object" 使用构造函数创建的变量,使用typeof判断会返回“object”结果,但是Function函数例外,由它创建的变量typeof返回的是“function” 接着就来说说typeof null == "object"。这个相信前端开发的小伙伴都知道是这个结果了,But why? 这其实是javascript第一个版本就存在的一个bug,历史原因可以看……

网友NO.755307

JavaScript中constructor()方法的使用简介

JavaScript Boolean.constructor()方法返回一个引用到创建实例的原型布尔函数。 语法 boolean.constructor() 返回值: NA 下面是参数的详细信息: 返回创建此对象的实例。 例子: htmlheadtitleJavaScript constructor() Method/title/headbodyscript type="text/javascript" var bool = new Boolean( ); document.write("bool.constructor() is:"+bool.constructor); /script/body/html 这将产生以下结果: bool.constructor() is : function Boolean() { [native code] } ……

网友NO.128701

javascript之Boolean类型对象

Boolean对象和Java中的Boolean封装类很像,它有两个值:true和false 1、创建Boolean对象 复制代码 代码如下: var boo = new Boolean();//此时未对boo进行赋值,但是它的默认值为false var boo = new Boolean(true); var boo = true/false; 2、Boolean对象的constructor属性是Boolean 例: 复制代码 代码如下: var boo = new Boolean(); document.write(boo.constructor==Boolean); document.write('br'); document.write(boo); 输出结果为: true false 说明:它的constructor属性为Boolean 如果未给它赋初值的话,它的值为false 3、toString()方法,返回Boolean对象对应的字符串 true---true; false---false; 复制代码 代码如下: var boo = new Boolean(); document.write(boo); document.write('br'); document.write(boo.toString()); 输出: false false 此两种方法输出结果是一样的,有点类似于Java中某些类的输出 查看更多JavaScript的语法,大家可以关注:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持码农之家。 ……

网友NO.412176

JavaScript中引用vs复制示例详析

前言 好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象、数组、函数 复制:数字、布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较 下面来一起看看详细的介绍吧 首先我们看下面这个例子: let age = 18;let age2 = age;console.log(age, age2); 我们会得到以下的值: 18 18 这个相信大家都能很好理解。 那么如果我们改变 age 的值呢?输出会有什么变化? age = 20;console.log(age, age2); 我们会得到: 20 18 看到这里大家就奇怪了,上面的结果都很正常啊。 但在 JavaScript 中是有例外的,对于普通数据类型如 integer,string,boolean 可以通过 = 来复制这个变量,但对于 array 和 object 数据类型,= 只能起到引用的效果。 大家可以看下面这个例子: let arr = ['wes', 'bob', 'faker'];let arr2 = arr;console.log(arr2, arr);arr[2] = 'dean';console.log(arr2, arr); 得到的结果是: ["wes", "bob", "faker"] ["wes", "bob", "faker"] ["wes", "bob", "dean"] ["wes", "bob", "dean"] 我们会发现随着 arr 的改变,arr2 也会跟着改变。 说明 arr2 并没有复制 arr 的值,只是引用了它,它们……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明