1，什么是ajax？

　　Asynchronous JavaScript and XML（當然現(xiàn)在xml已經由json代替）；

　　主要是用于前后臺的交互（表單提交已經被廢棄）；

　　使用場景：前臺獲取數據、表單的失焦驗證；

?

---

?

2，如何在有服務的環(huán)境下使用ajax發(fā)送請求

　　1.創(chuàng)建ajax對象-xmlhttprequest對象：（分為兩種類型）

　　　　在新版本的瀏覽器中：variable=new XMLHttpRequest();

　　　　老版本的IE中：variable=new ActiveXObject("Microsoft.XMLHTTP");

　　　　所以在這里我們需要考慮到兼容性的問題：　

　　　　　var xhr;if(window.XMLHttpRequest){ //常規(guī)，如果有，直接使用xhr = new XMLHttpRequest();}else{ //如果沒有，老版本IExhr = new ActiveXObject("Microsoft.XMLHTTP");}console.log(xhr)console.log("狀態(tài)碼:" + xhr.readyState);console.log('響應碼：' + xhr.status);console.log('響應文本:' + xhr.responseText);console.log('步驟一完成')

　　

　　2.通過監(jiān)聽ajax的狀態(tài)的改變來監(jiān)聽：

xhr.onreadystatechange = function(){console.log('xhr的狀態(tài)碼發(fā)生了改變');console.log("狀態(tài)碼:" + xhr.readyState);console.log('響應碼：' + xhr.status);console.log('響應文本:' + xhr.responseText);console.log('\n');} console.log('步驟二完成')

?

　　3.創(chuàng)建請求的消息，連接服務器

xhr.open('GET','07.php',true); //最后一個參數是bool，表示同步||異步，true異步 console.log('步驟三完成')

?

　　4.發(fā)送

xhr.send(null); //如果是post請求，就放post參數，如果是get請求，發(fā)送null就行了

　

　　5.附：

　　　　狀態(tài)碼：

0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

響應碼：
1xx 信息類
2xx 成功 200
3xx 重定向 304
4xx 客戶端錯誤 404
5xx 服務端錯誤

?

?

---

?

3,使用ajax發(fā)送get請求

html部分：

用戶名：<input type="text" id="username"><span id="ts"></span><br> 密碼：<input type="text"><button id="btn">驗證用戶名</button>

?

原生js部分：

<script>var username = document.getElementById("username");var btn = document.getElementById("btn");var ts= document.getElementById("ts");// 點擊btn發(fā)送ajax請求btn.onclick = function(){// 1.創(chuàng)建xhrvar xhr;if(window.XMLHttpRequest){ //常規(guī)，如果有，直接使用xhr = new XMLHttpRequest();}else{ //如果沒有，老版本IExhr = new ActiveXObject("Microsoft.XMLHTTP");}// 2.綁定監(jiān)聽函數xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){console.log(xhr.responseText)if(xhr.responseText == 1){ts.innerHTML = "該用戶名已經被注冊"}else if(xhr.responseText == 0){ts.innerHTML = "該用戶名可以使用"}}}}// 3.建立連接xhr.open("GET","08.php?uname=" + username.value,true);// 正則驗證// 4.發(fā)送請求xhr.send(null)}//get是直接可以在地址欄中調試</script>

?

---

?

4,使用ajax發(fā)送post請求

?html:

學生姓名：<input type="text" id="uname"><br> 學生成績：<input type="text" id="score"><br> <button id="btn">注冊</button> <p id="p01"></p>

?

原生js部分：

<script>function get_id(id){return document.getElementById(id);}var uname = get_id("uname");var score = get_id("score");var btn = get_id("btn");var p01 = get_id("p01");var reg_name = /^[a-z]{3,10}$/g;var reg_score = /^\d{1,2}$/g;var uname_flag = false;uname.onfocus = function(){reg_name.lastIndex = 0;this.style.border = '1px solid #000' uname_flag = false;}uname.onblur = function(){ if(reg_name.test(uname.value)){this.style.border = '1px solid #0f0';uname_flag = true;}else {this.style.border = '1px solid #f00'}}btn.onclick = function(){if(uname_flag){// 1.var xhr;if(window.XMLHttpRequest){ //常規(guī)，如果有，直接使用xhr = new XMLHttpRequest();}else{ //如果沒有，老版本IExhr = new ActiveXObject("Microsoft.XMLHTTP");}// 2.xhr.onreadystatechange = function(){if(xhr.readyState == 4){if (xhr.status == 200) {console.log(xhr.responseText);p01.innerHTML = xhr.responseText;}}}// 3.xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);// 3.5 在發(fā)送post請求的時候，你得告訴服務器你發(fā)送的是一個什么xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 4.發(fā)送xhr.send('strName=' + uname.value + '&strScore=' + score.value);}}</script>

?

?

---

?

5,使用jQuery—ajax發(fā)送get請求

用戶名：<input type="text" id="username"><span id="ts"></span><br> 密碼： <input type="text"><button id="btn">驗證用戶名</button> $("#btn").click(function(){$.ajax({type : "GET",url : "01.php?uname=" + $("#username").val(),success : function(data){ //就是原生的xhr.responseText console.log(data);if(data == 0){$("#ts").html("該用戶名可以使用").css("color","green");}else if(data == 1){$("#ts").html("該用戶名已被占用").css("color","red");}},error : function(err){ //錯誤的 console.log(err)}}) })

?

---

?

6,使用jQuery—ajax發(fā)送post請求

?（html部分與上面相同相同）

$("#btn").click(function(){$.ajax({type : "POST",url : "http://192.168.9.154:8888/0221ajax/01.php",data : {uname : $("#username").val()},success : function(data){ //就是原生的xhr.responseText console.log(data);if(data == 0){$("#ts").html("該用戶名可以使用").css("color","green");}else if(data == 1){$("#ts").html("該用戶名已被占用").css("color","red");}},error : function(err){ //錯誤的 console.log(err)}}) })

?

總結

以上是生活随笔為你收集整理的Ajax发送请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。