纯js封装的ajax功能函数与用法示例

2023-09-12 22:00:05 304

本文实例讲述了纯js封装的ajax功能函数与用法。分享给大家供大家参考，具体如下：

AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）AJAX不是新的编程语言，而是一种使用现有标准的新方法。是7种技术的综合,它包含了七个技术(javascriptxmlxstlxhtmldomxmlhttprequest,css), ajax 是一个粘合剂。

直接上程序：

js调用部分：



window.onload=function(){
varoDs=document.getElementById('ds');
varoText=document.getElementById('text');
oDs.onclick=function(){
//第一个参数：数据传输方式getpost
//第二个参数：调用文件的路径
//第三个参数：data
//第四个参数：回调函数
ajax('GET','aa.txt','',function(str){
//此处是调用名字为aa的txt文件里所有的内容(str)，所以data直接为''
//如果需要插入特定参数,则data值为data='&name='+oText.value;
console.log(str);//名字为aa的txt文件里所有的内容
});
}
}

html部分：

ajax封装部分：

functionajax(method,url,data,fnsuccess){
varxhr;
//1.创建对象，兼容问题
if(window.XMLHttpRequest){
//在高版本的浏览器IE7+
xhr=newXMLHttpRequest();
//XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
}else{
//IE5IE6
xhr=newActiveXObject();
}
//2.发送请求
//第一个参数：数据传输方式getpost
//第二个参数：处理文件xx.phpxx.txt，要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
//第三个参数：同步或者异步方式，默认是异步true
//open
//get模式路径上同时加入需要传输的内容
if(method=='GET'&&data){
url=url+'?'+data;
}
xhr.open(method,url,true);
//send
//send()如果是get方式，写null或者为空；
//如果是post，参数那就直接写要传输的内容
if(method=='GET'){
xhr.send(null);
}else{
//创建头文件信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
//4.接受php传过来的数据，解析dom操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//响应过程状态信息，4代表发送完成，顺利返回信息
if(xhr.status==200){//status:状态码，如果返回的信息是200
fnsuccess&&fnsuccess(xhr.responseText);
}else{
alert(xhr.status);//发生错误时，返回该状态码
}
}
}
}

表单验证，用户名验证：



用户名：

密码：

js调用部分：



window.onload=function(){
varoUsername=document.getElementById('username');
varoInf=document.getElementById('inf');
oUsername.onkeyup=function(){
vardata='&name='+oUsername.value;
//路径连接的是php文件
ajax('GET','/0322/test/checkName.php',data,function(str){
oInf.innerHTML=str;
});
}
}

php部分：

该用户名重复了';
}else{
echo'该用户名可以注册';
}
?>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

纯js封装的ajax功能函数与用法示例

热门推荐

随机推荐