原生js封装ajax函数
程序员文章站
2024-03-17 12:04:28
...
1.ajax简介
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2.ajax的优点
ajax技术解决了很多其它技术解决不了的问题，比如:
(1)页面无刷新的动态数据交换
(2)局部刷新页面【验证用户名唯一】
(3)界面的美观 【增强用户体验】
(4)对数据库的操作
(5)可以返回简单的文本格式，也可以返回 xml文件格式（这几年很少用了）, json数据格式。
3.下面用原生js封装ajax函数:
//参数：传输方式，路径，数据，回调函数
function ajax(method,url,data,fnsuccess){
//1.创建ajax对象
var xhr=new XMLHttpRequest();
//2.发送http请求（准备数据，真正发送）
if(method=='GET' && data){
//如果是get方式，并且有数据，把数据绑到url上
url=url+'?'+data;
}
xhr.open(method,url,true);//准备数据
if(method=='GET'){ //发送数据，不同的方式，数据发送形式不一样
xhr.send(null);
}
else{
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
//4.拿到数据，返回给回调函数进行DOM操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(fnsuccess){
fnsuccess(xhr.responseText);//这里注意只能接收非xml数据
}
}
}
}
}例子：验证用户名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.green{
color:green;
}
.red{
color:red;
}
</style>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var tips=document.getElementById("tips");
var user=document.getElementById("user");
user.onkeyup=function(){
var data=user.value;
ajax("GET","check.php?name="+data,"",function(str){
if(str==0){
tips.innerHTML="该用户名不可用";
tips.className="red";
}else if(str==1){
tips.innerHTML="用户名已被注册";
tips.className="red";
}else{
tips.innerHTML="用户名可用";
tips.className="green";
}
})
}
}
</script>
</head>
<body>
<form action="" method="get">
用户:<input type="text" id="user" name=""/> <span id="tips"></span><br/>
密码: <input type="password" id="passw"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<?php
header("Content-Type: text/xml;charset=utf-8");
$var=$_GET['name'];
if($var=="admin"){
echo "0";
}else if($var=="liao"){
echo "1";
}else{
echo "2";
}
?>上一篇： 前端基础知识点(3)