So verwenden Sie Ajax und $.ajax

Dieses Mal erkläre ich Ihnen, wie Sie Ajax und $.ajax verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax und $.ajax? Hier sind praktische Fälle.

Beispiel 1 (Grundlegendes Erstellungsformat der Ajax-Anfrage):

 <title>Ajax练习（GET，不考虑浏览器兼容性）</title>
 <script>
  function doRequest() {
   //不考虑浏览器兼容性问题
   var xmlHttp = new XMLHttpRequest();
   //打开一个与Http服务器的连接
   xmlHttp.open("GET", "Default.aspx", true);
   //与服务器端交互
   xmlHttp.send(null);
   //监听服务器端响应状态的改变事件
   xmlHttp.onreadystatechange = function () {
    //客户端与服务器端交互完成
    if (xmlHttp.readyState == 4) {
     //服务器端返回Http状态码：200表示请求成功,404未找到,403错误
     if (xmlHttp.status == 200) {
      //获得服务器端资源
      var result = xmlHttp.responseText;
      alert(result);
     }
    }
   }
  }
 </script>


 

 

    

 

 <title>AjaxDemo实例</title>
 <script></script>
 <script>
  //使用Ajax读取浏览器的工作内容 
  function readRequest() {
   //不考虑浏览器的兼容性问题
   var xmlhttp = new XMLHttpRequest();
   //打开一个与服务器相关的链接
   //发送请求
   //请求的方式（获取/发送），请求页面，是否异步
   xmlhttp.open("GET", "AjaxDemo.aspx", true);
   //发送数据
   xmlhttp.send(null);
   //接受服务器返回结果
   xmlhttp.onreadystatechange = function() {
    //请求完成
    if (xmlhttp.readyState == 4) {
     //链接成功
     if (xmlhttp.status == 200) {
      //输出浏览器的内容
      var result = xmlhttp.responseText;
      alert(result);
      window.alert("读取浏览器的内容成功！");
     }
    }
   };
  };
  function btn_Click() {
   var http = new ActiveXObject("Microsoft.XMLHTTP");
   //或者使用这一句创建 var xmlhttp = new XMLHttpRequest();
   if (!http) {
    alert("创建xmlhttp对象异常！");
    return false;
   }
   http.open("POST", "AjaxDemo.ashx", false);
   http.onreadystatechange = function() {
    if (http.readyState == 4) {
     //链接成功
     if (http.status == 200) {
      alert(http.responseText);
      document.getElementById("Text1").value = http.responseText;
     } else {
      window.alert("Ajax服务器返回错误！");
     }
    }
   };
   http.send();
  };
 </script>


 

 

   
         

 

Beispiel 2 ( siehe Anhang)

Berücksichtigen Sie die Browserkompatibilität. Ajax-Anforderungsverarbeitung, um den Inhalt der Hintergrund-XML-Datei zu erhalten.

Beispiel 3 (siehe Anhang)

Verwenden Sie $.Ajax, um Hintergrundinformationen zum Lesen von XML-Dateiinhalten zu erhalten.

function readXML1() {
   //创建XML对象
   var xmldom = new ActiveXObject("Microsoft.XMLDOM");
   //设置为异步
   xmldom.async = "false";
   //加载需要读取的XML文档
   xmldom.load("XML1.xml");
   info = "";
   //需要读取的根节点
   var node = xmldom.selectNodes("student");
   //依次读取其中的内容
   info = node[0].childNodes[0].nodeTypedValue + " <br>" + node[0].childNodes[1].nodeTypedValue+ "<br>" + node[0].childNodes[2].nodeTypedValue;
   document.getElementById("xmlmsg").innerHTML = info;
  };

 function readXML2() {
   //实例化xml对象
   var xml = new ActiveXObject("Microsoft.XMLDOM");
   //异步设置
   xml.async = "false";
   //加载需要读取的XML文档
   xml.load("XML2.xml");
   info = "";
   //选择需要读取的对象名称
   var fnode = xml.documentElement.selectNodes("people");
   //循环输出文档的内容
   for (var i = 0; i ";
    }
   }
   document.getElementById("xmlmsg").innerHTML = info;
  };

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax+MySQL zum Erstellen einer Message-Board-Funktion

Der grundlegendste Weg für Ajax zu realisieren Dreistufiges Verknüpfungskonzept

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax und $.ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!