寫原生Ajax的方法：先建立XMLHttpRequest物件；然後寫回呼函數onreadystatechange；接著設定請求訊息；最後發送請求即可。
Ajax（Asynchronous JavaScript and XML的縮寫）是一種非同步請求資料的web開發技術，對於改善使用者的體驗和頁面效能很有幫助。
簡單地說，在不需要重新刷新頁面的情況下，Ajax 透過非同步請求載入後台數據，並在網頁上呈現。常見運用場景有表單驗證是否登
入成功、百度搜尋下拉方塊提示和快遞單號查詢等等。
想要對Ajax有一個全面的了解，這裡可以去Js教程中對它進行一個全方面認識。
現在Ajax經過各種優化已經變得非常方便了，例如使用Jquery只需要一行便可以使用Ajax了。
那麼原生的Ajax是什麼樣子呢？
讓我們來看一下。
<script>
function ajax(url){
//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
//XMLHttpRequest对象，而是用的ActiveXObject对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
xhr.open("get",url,true);
xhr.send();//发送请求
xhr.onreadysattechange = () =>{
if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
if(xhr.status == 200){//返回状态码
var data = xhr.responseTEXT;
return data;
}
}
}
}
</script>readystate：
儲存 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 伺服器連線已建立
#2: 請求已接收
3: 請求處理中
4: 請求已完成，且回應已就緒
status ：
200: "OK"
404: 未找到頁面
405：請求方式不正確
500：伺服器內部錯誤
403：禁止請求
Ajax有兩種請求方式：
get請求方式
<script>
function ajax() {
//创建核心对象
xhr = null;
if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)
}
}
//open设置请求方式和请求路径
xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
//send 发送
xhr.send();
}
</script>post請求方式
<script>
function ajax() {
//创建核心对象
xhr = null;
if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)//警告框，显示返回的Text
}
}
//open设置请求方式和请求路径
xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
//设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
//send 发送
xhr.send("userId=10");
}
</script>以上是原生Ajax怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
