1,什么是ajax?
Asynchronous JavaScript and XML(当然现在xml已经由json代替);
主要是用于前后台的交互(表单提交已经被废弃);
使用场景:前台获取数据、表单的失焦验证;
2,如何在有服务的环境下使用ajax发送请求
1.创建ajax对象-xmlhttprequest对象:(分为两种类型)
在新版本的浏览器中:variable=new XMLHttpRequest();
老版本的IE中:variable=new ActiveXObject("Microsoft.XMLHTTP");
所以在这里我们需要考虑到兼容性的问题:
varxhr;if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = newXMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xhr)
console.log("状态码:" +xhr.readyState);
console.log(‘响应码:‘ +xhr.status);
console.log(‘响应文本:‘ +xhr.responseText);
console.log(‘步骤一完成‘)
2.通过监听ajax的状态的改变来监听:
xhr.onreadystatechange = function(){
console.log(‘xhr的状态码发生了改变‘);
console.log("状态码:" +xhr.readyState);
console.log(‘响应码:‘ +xhr.status);
console.log(‘响应文本:‘ +xhr.responseText);
console.log(‘\n‘);
}
console.log(‘步骤二完成‘)
3.创建请求的消息,连接服务器
xhr.open(‘GET‘,‘07.PHP‘,true); //最后一个参数是bool,表示同步||异步,true异步
console.log(‘步骤三完成‘)
4.发送
xhr.send(null); //如果是post请求,就放post参数,如果是get请求,发送null就行了
5.附:
状态码:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
响应码:
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误
3,使用ajax发送get请求
html部分:
用户名:
密码:
验证用户名
原生js部分:
var username = document.getElementById("username");var btn = document.getElementById("btn");var ts= document.getElementById("ts");//点击btn发送ajax请求
btn.onclick = function(){//1.创建xhr
varxhr;if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = newXMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}//2.绑定监听函数
xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){
console.log(xhr.responseText)if(xhr.responseText == 1){
ts.innerHTML= "该用户名已经被注册"}else if(xhr.responseText == 0){
ts.innerHTML= "该用户名可以使用"}
}
}
}//3.建立连接
xhr.open("GET","08.PHP?uname=" + username.value,true);//正则验证
//4.发送请求
xhr.send(null)
}//get是直接可以在地址栏中调试
4,使用ajax发送post请求
html:
学生姓名:
学生成绩:
注册
原生js部分:
functionget_id(id){returndocument.getElementById(id);
}var uname = get_id("uname");var score = get_id("score");var btn = get_id("btn");var p01 = get_id("p01");var reg_name = /^[a-z]{3,10}$/g;var reg_score = /^\d{1,2}$/g;var uname_flag = false;
uname.οnfοcus= function(){
reg_name.lastIndex= 0;this.style.border = ‘1px solid #000‘uname_flag= false;
}
uname.οnblur= function(){if(reg_name.test(uname.value)){this.style.border = ‘1px solid #0f0‘;
uname_flag= true;
}else{this.style.border = ‘1px solid #f00‘}
}
btn.οnclick= function(){if(uname_flag){//1.
varxhr;if(window.XMLHttpRequest){ //常规,如果有,直接使用
xhr = newXMLHttpRequest();
}else{ //如果没有,老版本IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}//2.
xhr.onreadystatechange = function(){if(xhr.readyState == 4){if (xhr.status == 200) {
console.log(xhr.responseText);
p01.innerHTML=xhr.responseText;
}
}
}//3.
xhr.open(‘POST‘,‘http://localhost:8888/0220ajax/09.PHP‘,true);//3.5 在发送post请求的时候,你得告诉服务器你发送的是一个什么
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//4.发送
xhr.send(‘strName=‘ + uname.value + ‘&strscore=‘ +score.value);
}
}
5,使用jQuery—ajax发送get请求
用户名:
密码:
验证用户名
$("#btn").click(function(){
$.ajax({
type :"GET",url :"01.PHP?uname=" + $("#username").val(),success :function(data){ //就是原生的xhr.responseText
console.log(data);if(data == 0){
$("#ts").html("该用户名可以使用").css("color","green");
}else if(data == 1){
$("#ts").html("该用户名已被占用").css("color","red");
}
},error :function(err){ //console.log(err)
}
})
})
6,使用jQuery—ajax发送post请求
(html部分与上面相同相同)
$("#btn").click(function(){
$.ajax({
type :"POST",url :"http://192.168.9.154:8888/0221ajax/01.PHP",data : {
uname : $("#username").val()
},error :function(err){ //console.log(err)
}
})
})