【Ajax】创建并封装
生活随笔
收集整理的這篇文章主要介紹了
【Ajax】创建并封装
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
創建
<!DOCTYPE html> <html> <head><title></title><style>#button1{background:skyblue;border-radius:20px;width:100px;}</style> </head> <body> <button id="button1">按鈕</button> <input id="input1"> </body> <script type="text/javascript"> document.getElementById("button1").onclick=function(){/*1、創建對象2、設置請求方式和請求地址3、發送請求4、監聽請求的變化5、處理返回的結果 */var xhr=new XMLHttpRequest();xhr.open("GET","xxx.txt",true);//true代表的是否發布異步請求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);document.getElementById('input1').value=xhr.responseText;}} };</script> </html>xxx.text中填入
Hello World點擊則會有相應文本生成
封裝
function ajax(url, success, error){/*1、創建對象2、設置請求方式和請求地址3、發送請求4、監聽請求的變化5、處理返回的結果 */var xhr=new XMLHttpRequest();xhr.open("GET",url,true);//true代表的是否發布異步請求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status >=200&& xhr.status<300||xhr.status==304){//5、處理返回的結果//console.log("accept success");success(xhr);}else{//console.log("accept false");error(xhr);} } } } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的【Ajax】创建并封装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数控铣编程与操作数控铣床编程与操作
- 下一篇： 合众张勇：哪吒S用料扎实 100万内的车