jQuery_review之 原生Ajax的寫法，jquery_reviewajax
最低層的ajax的實現是基於瀏覽器的一個標準，就是XMLHttpRequest對象，這種對象在MS瀏覽器上面的實現與其他瀏覽器上面的實現是不一樣的。儘管現在非常多的第三方架構採用”模板模式“封裝了如何擷取XMLHttpRequest對象以及如何發送和處理中間出現的異常，但是還是非常有必要對ajax進行一次複習，這樣才能在看其他的方法的時候溫故而知新的效果。
編寫原生的ajax的代碼，需要需要採用的步驟是，首先，我們應當在function中定義一個XMLHttpRequest的變數對象，然後對這個變數對象進行初始化，這裡應該注意的事情是，在不同的瀏覽器下面得到該對象的方式是不一樣的，在MS中，我們使用的是ActiveXObjct的方式來擷取，在其他的瀏覽器下面使用的是window的子物件。在該變數對象初始化之後，使用.open來分別定義參數來指定該XMLHttpRequest對象的使用什麼方式來擷取資訊？要擷取資訊的URL是什嗎？以及是同步還是非同步來進行擷取呢？最後，需要指定這個函數在請求返回之後的回呼函數，在回呼函數中，根據狀態資訊和狀態代碼資訊來採取相應的動作，最後，使用XMLHttpRequest對象的send方法，發送ajax請求。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript"> function ajax(){ var xmlHttpRequest = null; if(window.ActiveXObject){ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttpRequest=new XMLHttpRequest(); } xmlHttpRequest.open("GET","test",true); xmlHttpRequest.onreadystatechange=callBack; xmlHttpRequest.send(null); function callBack(){ if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status ==200){ document.getElementById("showText").innerHTML = xmlHttpRequest.responseText; } } } } </script> </head> <body> <div id="showText"></div> <input type="button" onclick="javascript:ajax()" value="sendAjax"> </body></html>
jquery是將原生的js封裝了的
正常寫的話 是需要寫好多代碼判斷是什麼瀏覽器來正確使用不同的ajax版本
jquery已經寫好判斷了的 用$.ajax $.get $.post 甚至JSONP都已經封裝好了的 都不再需要自己寫好多判斷 也不用寫原生js的ajax代碼了的 直接調用就OK
jquery中使用ajax的幾種常用寫法
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
