AJax學習筆記

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/qq1010885678/article/details/37538841

Ajax:

  1.建立Ajax異步對象，在不同的浏覽器有不同的方式！！必須做浏覽器相容代碼

   //建立xhr對象 相容方式

    function createXmlHttp() {

    var xhobj = false;

    try {

        xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+

    } catch (e) {

        try {

            xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6

        } catch (e2) {

            xhobj = false;

        }

    }

    if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari ，ie10

        xhobj = new XMLHttpRequest();

    return xhobj;

  2.如果使用get請求相同的url，那麼浏覽器會直接從緩存中讀取頁面結果，而不會去伺服器拿資料。

如果使用get請求，不想讀取浏覽器緩存的話要加上下面的代碼：

xhr.setRequestHeader("If-Modified-Since",0);

  3.Ajax是一種異步的js，他不是一種新的技術，而是将多種技術整合在一起的技術，是一種浏覽器

端的技術，主要目的是在于局部的和伺服器互動而不用重新整理整個頁面

  4.XMLHttpRequest對象是Ajax的核心，可以異步的從伺服器擷取txt或者xml資料

  5.使用Ajax實作省市下拉框部分代碼：

相容浏覽器的Ajax寫法Get版：

function Ajax(url,onsuccess)

{

  var aj = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");

  aj.open("Get",url,true);   //Get請求通過url直接傳遞參數

  aj.onreadystatechange = function()

  {

    if(aj.readyState == 4 && aj.status == 200)

    {

      onsuccess(aj.responseText);

  }

  aj.send();

}

相容浏覽器的Ajax寫法Post版：

function Ajax(url,onsuccess,參數)

var ajax = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");

ajax.open("Post",url,true);

ajax.setRequstHeader("Content-Type","application/x-www-form-urlencoded");

ajax.onreadystatechange = function()

if(ajax.state == 4 && ajax.status == 200)

onsuccess(ajax.responseText);

ajax.send(參數);    //Post方式在send中添加參數傳送

  7.ajax實作删除：在伺服器的資料庫中删除資料之後，前台頁面對應的行的要被删除

var a = document.getElementById("");

var tr = a.perantNode.perantNode;//a的父節點是td，td的父節點是tr

tr.perantNode.RemoveChild(tr);//tr的父節點是table，調用table的删除子節點的方法删除tr這個行

  8.在js中将中文編碼使用encodeURI("中文");

  9.Ajax的readySate：

    0 未初始化，new完後

    1 已打開，建立完成并初始化，但還沒有send

    2 已發送，已經調用send，正在等待狀态碼的傳回

    3 正在接收，但是還不能用，響應消息還不完整

    4 已加載，所有資料加載完畢

  10.Ajax的常用方法：

    abort：取消請求

    open：初始化

    send：發送請求

    setHttpRequestHeader:添加自定義HTTP頭到請求

    getAllResponseHeaders：擷取整個HTTP響應頭的清單

    getResponseHeader：僅獲得指定的響應頭

  11.Ajax異步對象不能請求非本網站的頁面，如：百度的Ajax不能給谷歌的伺服器發送請求，浏覽器

會報錯，沒有權限，這是一種安全機制

解決方案：

  使用script标簽。script标簽可以跨網站發送請求，如：在百度的伺服器上有<script src="http://www.google.com/GetData.ashx">，将請求google伺服器的一個頁面，該頁面context.Response.Write("var myData = " + res);傳回的js對象作為全局對象，即在百度伺服器的頁面都可以通路這個傳回的對象（等于在百度頁面上定義了一個全局的對象），這樣就可以實作使用js進行跨域請求，JsonP技術，其實是js的一種使用方法，并不是一個新的技術

以上是JsonP的第一種用法，獲得另外一台伺服器動态頁面傳回的js資料

第二種方法，獲得另外一台伺服器動态頁面傳回的js資料，并且傳方法名參數給伺服器，由伺服器傳回的js代碼調用這個方法（最流行的一種用法），例子：

伺服器端：string funcName = context.Request.QueryString["funcName"];

          context.Response.Write(funcName + "(" + res + ");");

浏覽器端：

          var sc = document.creatElement("script");

          sc.src = "http://另外一條伺服器的域名?funcName=MyData";

          document.body.appendChild(sc);//這個script标簽裡面的内容是另外一台伺服器發回來          的js代碼

          //下面這個方法必須有，不然伺服器發回來的方法不存在，

          function MyData(data)

          {

            alert(data);

          }