zoukankan      html  css  js  c++  java
  • 《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式

    一、AJAX概述

            AJAX是Asynchronous JavaScript and XML的缩写。中文译作异步JavaScript和XML。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。在不又一次载入页面的情况下,与server交换数据并更新部分网页的艺术。

    其核心是:client的Javascript可以与webserver进行异步数据交换。


    二、AJAX基础---XMLHttpRequest对象

           全部现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与server交换数据。这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新。


            1、创建 XMLHttpRequest 对象的语法:

                  var obj1 = new XMLHttpRequest();。

                  IE5和IE6中。使用ActiveX对象:var obj2 = new ActiveXObject("Micorosoft.XMLHTTP");

                  能够用例如以下方式保持兼容:

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

           2、XMLHttpRequest 对象的方法和属性

           XMLHttpRequest 对象的方法和属性用来向server发送请求和从server获取响应。

                 2.1    发送请求:open()和send()

                           open()方法用于创建一个请求。创建的HTTP请求并未发送,直到调用send()方法才被发送

                            method不区分大写和小写。URL能够是绝对或者相对地址。async默觉得true,意味着并不会马上返回数据。string參数可选,用于定义发送请求的正文(最好用字符串格式,而且使用setRequestHeader()方法定义请求报头的内容内型及编码方式)。


                  2.2     setRequestHeader():设置请求报头,将和请求一同发送到服务端


     

    //假设须要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来加入 HTTP 头。
    //然后在 send() 方法中规定您希望发送的数据:
    xmlhttp.open("POST","ajax_test.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");

                  2.3    abort():终止请求 。没有參数。


    三、AJAX获取server响应

            利用XMLHttpRequest对象和属性获取server的响应,包含HTTP报头和响应的正文。

            1、xmlObj.getAllResponseHeaders():获取全部响应的报头,以字符串形式返回。每一个HTTP报头名称和值用冒号分隔。如myheader:myvalue,并以 结束。

           

             2、xmlObj.getResponseHeader(param):获取响应中某个特定的字段值。參数param是一个响应的HTPP字段名。


             3、responseText和responseXML属性

                   均为仅仅读属性。用于返回server中响应的正文。

    <span style="font-size:14px;">//responseText属性
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    
    ////responseXML属性
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++)
      {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
      }
    document.getElementById("myDiv").innerHTML=txt;</span>


            4、status和statusText属性

                  均为仅仅读属性,用于推断响应状态。

    status表示响应中的状态码。如404,200等,statusText表示状态文本信息。如OK,Not Found。状态码和文本信息一一相应,常见例如以下:


                     点击查看完整版。

    这两个属性仅在send()方法发送数据并接收到server响应完成后才有效。


             5、readyState属性

                   该属性表示HTTP请求的状态码,仅仅读,返回一个整数,其值和说明例如以下:

                   0 描写叙述一种"未初始化"状态;此时,已经创建一个xmlhttprequest对象,可是还没有初始化。 
             1 描写叙述一种"发送"状态;此时,代码已经调用了xmlhttprequest open()方法而且xmlhttprequest已经准备好把一个请求发送到server。 
             2 描写叙述一种"发送"状态;此时,已经通过send()方法把一个请求发送到server端,可是还没有收到一个响应。 
             3 描写叙述一种"正在接收"状态;此时,已经接收到http响应头部信息,可是消息体部分还没有全然接收结束。

     
             4 描写叙述一种"已载入"状态;此时,响应已经被全然接收。


    四、onreadystatechange 事件

        readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时。就会触发 onreadystatechange 事件。

    onreadystatechange属性能够指定一个函数,当状态改变就调用该函数。

    函数常常与readyState/status/statusText属性确定响应的详细状态

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }


    五、解决请求被浏览器缓存的问题

        在使用XMLHttpRequest时,要注意的一个问题是载入的内容可能被浏览器缓存。能够对URL參数作改动避免此问题。

    经常用法是加上一个随机数作为查询參数。

    <span style="color:#000000;">xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
    <span style="font-family:SimSun;">//或者:xmlhttp.open("get","url"+(new Date()).getTime(),true);</span>
     xmlhttp.send();</span>

    六、点击看实例

  • 相关阅读:
    java之 向上转型与向下转型
    java之 惰性初始化
    mysql 学习网站
    history of program atan2(y,x)和pow(x,y)
    atom 之 前端必备插件
    js之正则表达式
    Django之模型层
    每日作业5/28
    每日作业5/27
    每日作业5.26
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6763840.html
Copyright © 2011-2022 走看看