當前位置：首頁 >

Ajax发送请求

發(fā)布時間：2024/10/12 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax发送请求小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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部分：

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部分：

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发送请求的全部內容，希望文章能夠幫你解決所遇到的問題。

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

Ajax