JavaScript学习心得(十)

Ajax

  Ajax是浏览器中使用JavaScript进行服务器后台请求,读取附加信息或者导致服务器响应的过程。

  Ajax广泛用于从服务器读取数据,并用所得到的数据更新页面,以及向服务器发送数据

  Ajax请求执行:

  1. 创建一个Ajax对象
  2. 发出请求
  3. 处理服务器响应

一 基础

  创建一个Ajax对象:

JavaScript学习心得(十)
JavaScript学习心得(十)
function getXMLHttpRequestObject(){
     var ajax = null;
     if(window.XMLHttpRequest){
         ajax = new XMLHttpRequest();       
         }else if(window.ActiveXObject){//old IE
            ajax = new ActiveXObject(‘MSXML2.XMLHTTP.3.0‘);
             }   
    return ajax;
}        
JavaScript学习心得(十)

  指定对象的结果处理器(即Ajax事务期间调用的函数),将函数和Ajax调用关联: ajax.onreadystatechange = handleStateChange; 

JavaScript学习心得(十)

  发出请求,调用对象的open()方法,以请求类型作为第一参数,服务器资源URL为第二参数,TRUE为第三参数。

  常见的请求类型GET和POST:

  • GET请求是请求HTML的标准方法即单击链接时浏览器发出的请求类型,用于获取数据
  • POST表单提交的标准方法,用于发起服务器更改或者响应,用于常见而可重复的请求

  Ajax请求必须经过服务器发起才能正常工作。

  调用send()实际的发出请求:ajax.send(null)

  abort()撤销请求。

  readyStrate属性有一下五个值,执行顺序如下:

  • 0,未发送
  • 1,打开
  • 2,接收到首标
  • 3,加载中
  • 4,完成

  检查readyState属性并反应,在此之前进行一次检查--确认响应正常,使用status属性(代表服务器对资源请求的相应代码)完成确认:

JavaScript学习心得(十)
1 if(ajax.readyState == 4){
2   if((ajax.status >= 200 && ajax.status <300) ||(ajax.status==304)){
3   //handle the response
4   }else{
5      //status error
6      }  
7 }else{
8 //show the loading message or do nothing
9 }
JavaScript学习心得(十)

  HTTP代码:

成功2××          成功处理了请求的状态码。
200                   服务器已成功处理了请求并提供了请求的网页。
204                   服务器成功处理了请求,但没有返回任何内容。                         
重定向3××       每次请求中使用重定向不要超过 5 次。
301                   请求的网页已永久移动到新位置。当URLs发生变化时,使用301代码。搜索引擎索引中保存新的URL。
302                   请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
304                   如果网页自请求者上次请求后没有更新,则用304代码告诉搜索引擎机器人,可节省带宽和开销。
客户端错误4××  表示请求可能出错,妨碍了服务器的处理。
400                    服务器不理解请求的语法。
403                    服务器拒绝请求。
404                    服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。
410                    请求的资源永久删除后,服务器返回此响应。该代码与 404(未找到)代码相似,但在资源以前存在而现在不存在的情况下,有时用来替代404 代码。如果资源已永久删除,应当使用 301 指定资源的新位置。
服务器错误5××   表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。
500                     服务器遇到错误,无法完成请求。
503                     服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。

二  JSON

  JavaScript对象标记法(JavaScript‘S Object )。建议使用双引号标记所有属性和值。

  在Ajax中,使用JSON:将其解析为JavaScript代码:

  1. 从Ajax对象获得对象的responseText属性中获取数据  var data = ajax.responseText;  
  2. 转化为JavaScript对象 var data = JSON.parse(data); 

JavaScript学习心得(十),布布扣,bubuko.com

JavaScript学习心得(十)

上一篇:C#线程通信与异步委托


下一篇:小程序wxs是作用