ajax的原生代码,原生js封装ajax代码

1 //例子

2

3

4

5

6

7

ajax注册

8

9

10

11

12 用户名：

13

14

15 密  码：

16

17

18 确认密码：

19

20

21 邮箱：

22

23

24 手机：

25

26

27 验证码：

28

29

30

31

32

33

34

35 function checkform() {36 var name = document.getElementById('username').value;37 if (name.length <= 0) {38 showTips('用户名不能为空');39 return false;40 }41

42 var pass = document.getElementById('userpass1').value;43 if (pass.length <= 0) {44 showTips('密码不能为空');45 return false;46 }47

48 var pass2 = document.getElementById('userpass2').value;49 if (pass2.length <= 0) {50 showTips('确认密码不能为空');51 return false;52 }53

54 if (pass !=pass2) {55 showTips('两次密码输入不一致');56 return false;57 }58

59 var email = document.getElementById('useremail').value;60 if (email.length <= 0) {61 showTips('邮箱不能为空');62 return false;63 }64 var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;65 if( !emailReg.test(email) ){66 showTips('邮箱输入有误，请从新输入')67 return false;68 }69

70 var mobile = document.getElementById('usermobile').value;71 if (mobile.length <= 0) {72 showTips('手机号不能为空');73 return false;74 }75

76 var regu =/^[1][3|4|5|8][0-9]{9}$/gi;77 var re = newRegExp(regu);78 if (!re.test(mobile)) {79 showTips('手机号输入有误，请从新输入')80 return false;81 }82

83 var code = document.getElementById('vcode').value;84 if (code.length <= 0) {85 showTips('验证码不能为空');86 return false;87 }88

89 return true;90 }91

92 function clearTips(){93 document.getElementById('tips').style.display = "none";94 document.getElementById('tips').innerHTML = '';95 document.getElementById('submit').disabled = false;96 }97

98 function showTips(msg){99 tipObj = document.getElementById('tips');100 tipObj.style.display = "block";101 tipObj.innerHTML =msg;102 document.getElementById('submit').disabled = true;103 }104

105 function loading(){106 tipObj = document.getElementById('tips');107 tipObj.style.display = "block";108 tipObj.innerHTML = '加载中...';109 }110

111 function removeLoading(){112 tipObj = document.getElementById('tips');113 tipObj.innerHTML = '';114 tipObj.style.display = "none";115 }116

117 function checkName(){118 var name = document.getElementById('username').value;119 if(isNull(name)) {120 showTips('请输入用户名');121 }122 loading();123 var sendData = {username:name,action:'checkname'};124 Ajax('get','check.php',sendData,function(data) {125 removeLoading();126 var user = eval('('+data+')')127 if(user.id) {128 showTips('用户名已被占用，请从新输入用户名');129 }130 }, function(data){131

132 showTips('ajax请求错误');133 });134

135 }136

137 function checkEmail(strEmail) {138 var strEmail = document.getElementById('useremail');139 var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;140 if( !emailReg.test(strEmail.value) ){141 showTips('邮箱输入有误，请从新输入')142 return false;143 }144 }145

146 function changeCode(){147 var url = document.getElementById('code').src ;148 var rand = Math.floor(Math.random() * ( 1000 + 1));149 url += '?' +rand;150 document.getElementById('code').src =url;151 }152

153 function checkMobile(s){154 var obj = document.getElementById('usermobile');155 var regu =/^[1][3|4|5|8][0-9]{9}$/gi;156 var re = newRegExp(regu);157 if (!re.test(obj.value)) {158 showTips('手机号输入有误，请从新输入')159

160 var obj = document.getElementById('mobilebtn');161 obj.style.display = 'none';162 obj.disabled = true;163 return false;164 }165 var obj = document.getElementById('mobilebtn');166 obj.style.display = 'block';167 obj.disabled = false;168 }169

170 function getMobileCode(){171 var obj = document.getElementById('usermobile');172 var regu =/^[1][3|4|5|8][0-9]{9}$/gi;173 var re = newRegExp(regu);174 if (!re.test(obj.value)) {175 showTips("手机号输入有误，请从新输入")176 return false;177 }178 sendData = {mobile:obj.value, action:"getcode"}

//ajax调用179 Ajax("get","check.php",sendData, function(data){180 tipObj = document.getElementById('tips');181 tipObj.style.display = "block";182 tipObj.innerHTML = "手机验证码是：" +data;183 }, function(data){184 showTips('手机验证码获取错误') ;185 });186 }187

188 function checkPassFirst(){189 var pass = document.getElementById('userpass1').value;190 if (pass.length <= 0) {191 showTips('请输入密码');192 return false;193 }194

195 }196

197 function checkPass(){198 var obj1 = document.getElementById('userpass1');199 var obj2 = document.getElementById('userpass2');200 if (obj2.value.length <= 0) {201 showTips('请输入确认密码');202 return false;203 }204 if (obj1.value !=obj2.value ) {205 showTips('密码与确认密码不对，请从新输入密码');206 return false;207 }208 }209

210 function checkCode(){211 var obj1 = document.getElementById('vcode');212 if (obj1.value.length <= 0) {213 showTips('请输入验证码');214 return false;215 }216 if (obj1.value.length != 4) {217 showTips('请输入正确的验证码');218 return false;219 }220 }221

222 function isNull( str ){223 if ( str == "" ) return true;224 var regu = "^[ ]+$";225 var re = newRegExp(regu);226 returnre.test(str);227 }228

229

230 function addCookie(objName,objValue,objHours){//添加cookie

231 var str = objName + "=" +escape(objValue);232 if(objHours > 0){//为0时不设定过时时间，浏览器关闭时cookie自动消失

233 var date = newDate();234 var ms = objHours*3600*1000;235 date.setTime(date.getTime() +ms);236 str += "; expires=" +date.toGMTString();237 }238 document.cookie =str;239 alert("添加cookie成功");240 }241

242 function getCookie(objName){//获取指定名称的cookie的值

243 var arrStr = document.cookie.split(";");244 for(var i = 0;i < arrStr.length;i ++){245 var temp = arrStr[i].split("=");246 if(temp[0] == objName) return unescape(temp[1]);247 }248 }249

250 function delCookie(name){//为了删除指定名称的cookie，能够将其过时时间设定为一个过去的时间

251 var date = newDate();252 date.setTime(date.getTime() - 10000);253 document.cookie = name + "=a; expires=" +date.toGMTString();254 }255

256 //ajax封装

257 function Ajax(type, url, data, success, failed){258 //建立ajax对象

259 var xhr = null;260 if(window.XMLHttpRequest){261 xhr = newXMLHttpRequest();262 } else{263 xhr = new ActiveXObject('Microsoft.XMLHTTP')264 }265

266 var type =type.toUpperCase();267 //用于清除缓存

268 var random =Math.random();269

270 if(typeof data == 'object'){271 var str = '';272 for(var key indata){273 str += key+'='+data[key]+'&';274 }275 //method=get&url=

276 data = str.replace(/&$/, '');277 }278

279 if(type == 'GET'){280 if(data){281 xhr.open('GET', url + '?' + data, true);282 } else{283 xhr.open('GET', url + '?t=' + random, true);284 }285 xhr.send();286

287 } else if(type == 'POST'){288 xhr.open('POST', url, true);289 //若是须要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。

290 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");291 xhr.send(data);292 }293

294 //处理返回数据

295 xhr.onreadystatechange =function(){296 if(xhr.readyState == 4){297 if(xhr.status == 200){298 success(xhr.responseText);299 } else{300 if(failed){301 failed(xhr.status);302 }303 }304 }305 }306 }307

308

309