使用ajax不需要引入jquery;ajax全名為“Asynchronous javascript and XML”,也即異步JavaScript和XML,是指一種創建交互網頁應用的網頁開發技術,JavaScript原本就支持ajax,若是使用原生的ajax請求,當然不需要引入jquery。
本文操作環境:windows10系統、javascript1.8.5&&html5版本、DELL G3電腦。
js原本就支援ajax,如果你使用的是原生的ajax請求,當然可以不呼叫jquery庫呀!
AJAX全稱為「Asynchronous javascript and XML」(非同步javascript和XML),指一種建立互動式網頁應用程式的網頁開發技術。透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。
為什麼要使用AJAX? AJAX的優勢?
AJAX不是一種新的程式語言,而是一種用於創建更好更快以及更互動的 Web 應用程式的技術。
使用Javascript向伺服器提出請求並處理回應而不阻塞使用者!核心物件XMLHTTPRequest。透過這個對象,您的 JavaScript 可在不重載頁面的情況與Web伺服器交換資料。
AJAX 在瀏覽器與 Web 伺服器之間使用非同步資料傳輸(HTTP 請求),這樣就可使網頁從伺服器請求少量的信息,而不是整個頁面。
AJAX 可使網際網路應用程式更小、更快,更友善。
AJAX 是一種獨立於 Web 伺服器軟體的瀏覽器技術。 AJAX 基於下列 Web 標準:JavaScript、XML、HTML、CSS在 AJAX 中使用的 Web 標準已被良好定義,並由所有的主流瀏覽器支援。 AJAX 應用程式獨立於瀏覽器和平台。
Web 應用程式較桌面應用程式有許多優點;它們能夠涉及廣大的用戶,它們更容易安裝及維護,也更容易開發。
不過,網際網路應用程式並不像傳統的桌面應用程式那樣完善且友善。透過 AJAX,因特網應用程式可以變得更完善,更友善。
Ajax在JavaScript中的使用。
Get方式實作:
<script type="text/javascript"> var xmlHttpRequest; //创建XHR对象 function createXmlHttpRequest() { // if(typefo(XMLHttpRequest)!='undifine') if (window.ActiveXObject) { //如果是IE浏览器 return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { //非IE浏览器 return new XMLHttpRequest(); } } //Ajax调用的方法 function AjaxClick() { var url = "这里是你想要请求的URL,其中包括你的参数(?key1=value1&key2=value2)"; //1.创建XMLHttpRequest组建 xmlHttpRequest = createXmlHttpRequest(); //2.设置回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; //onreadystatechange。存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 //3.初始化XMLHttpRequest组建 xmlHttpRequest.open("GET", url, true); //open(method,url,async),规定请求的类型、URL 以及是否异步处理请求。 //method:请求的类型;GET 或 POST //url:文件在服务器上的位置 //async:true(异步)或 false(同步) //GET方式请求可以设置浏览器不使用缓存,需加上下面这段 //xhr.setRequestHeader("If-Modified-Since", "0"); //4.发送请求 xmlHttpRequest.send(null); } //回调函数 function ajaxCallBack() { //readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 //0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成,且响应已就绪 //status 请求响应状态码 //200: "OK" //404: 未找到页面 if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { //表示请求成功,且正常响应 //responseText 获得字符串形式的响应数据。 //responseXML 获得 XML 形式的响应数据。 var data = xmlHttpRequest.responseText; //你具体的代码操作写在这里,如对请求响应的数据如何处理 } } </script>
Post方式實作:
<script type="text/javascript"> var xmlHttpRequest; //创建XHR对象 function createXmlHttpRequest() { if (window.ActiveXObject) { //如果是IE浏览器 return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { //非IE浏览器 return new XMLHttpRequest(); } } //Ajax调用的方法 function AjaxClick() { var url = "这里是你想要请求的URL,不包括参数"; //1.创建XMLHttpRequest组建 xmlHttpRequest = createXmlHttpRequest(); //2.设置回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; //3.初始化XMLHttpRequest组建 xmlHttpRequest.open("POST", url, true); //4.添加请求头: xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //5.发送请求,send("这里是你的请求参数") xmlHttpRequest.send("key1=value1&key2=value2"); } //回调函数 function ajaxCallBack() { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { var data = xmlHttpRequest.responseText; //你具体的代码操作写在这里,如对请求响应的数据如何处理 } } </script>
【相關教學推薦:AJAX視頻教程】
以上是使用ajax需要引進jquery嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!