【Ajax】创建并封装
生活随笔
收集整理的這篇文章主要介紹了
【Ajax】创建并封装
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
創(chuàng)建
<!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、創(chuàng)建對(duì)象2、設(shè)置請(qǐng)求方式和請(qǐng)求地址3、發(fā)送請(qǐng)求4、監(jiān)聽請(qǐng)求的變化5、處理返回的結(jié)果 */var xhr=new XMLHttpRequest();xhr.open("GET","xxx.txt",true);//true代表的是否發(fā)布異步請(qǐng)求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);document.getElementById('input1').value=xhr.responseText;}} };</script> </html>xxx.text中填入
Hello World點(diǎn)擊則會(huì)有相應(yīng)文本生成
封裝
function ajax(url, success, error){/*1、創(chuàng)建對(duì)象2、設(shè)置請(qǐng)求方式和請(qǐng)求地址3、發(fā)送請(qǐng)求4、監(jiān)聽請(qǐng)求的變化5、處理返回的結(jié)果 */var xhr=new XMLHttpRequest();xhr.open("GET",url,true);//true代表的是否發(fā)布異步請(qǐng)求xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status >=200&& xhr.status<300||xhr.status==304){//5、處理返回的結(jié)果//console.log("accept success");success(xhr);}else{//console.log("accept false");error(xhr);} } } } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的【Ajax】创建并封装的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数控铣编程与操作数控铣床编程与操作
- 下一篇： 【JDBC】各版本jar包下载网址及To