初探ajax
一、一些基本概念
1.什么是ajax
ajax：async JavaScript and xml。是前后台通信的一种手段，一种方式。
2.使用场景
使用ajax的场景包括前台获取数据、表单失焦验证等。
3.get和post的区别
get参数是在地址栏中，大小2000个字符左右
post参数是在请求体中，网速良好，理论上是无限大的。
二、原生js写ajax
1、创建ajax对象-xmlhttprequest对象
注意这里存在兼容性问题：
var xhr; if(window.XMLHttpRequest){ //常规，如果有，直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有，老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
2.通过监听ajax的状态的改变
其中各状态码所表达的意义：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
各响应码所表达的意义：
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误
xhr.onreadystatechange = function(){ console.log('xhr的状态码发生了改变'); console.log("状态码:" + xhr.readyState); console.log('响应码：' + xhr.status); console.log('响应文本:' + xhr.responseText); console.log('\n'); }
3.创建请求的消息，连接服务器（状态码0=>1）
xhr.open('GET','07.php',true);
4.发送
这里如果是post请求，就传post参数，如果是get请求，发送null就行了。
xhr.send(null);
例如：用ajax发送get请求：
用户名：<input type="text" id="username">
<span id="ts"></span>
<br>
密码：<input type="text">
<button id="btn">验证用户名</button>
<script>
var username = document.getElementById("username");
var btn = document.getElementById("btn");
var ts= document.getElementById("ts");
// 点击btn发送ajax请求
btn.onclick = function(){
// 1.创建xhr
var xhr;
if(window.XMLHttpRequest){ //常规，如果有，直接使用
xhr = new XMLHttpRequest();
}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)
}
</script>
用ajax发送post请求：
学生姓名：<input type="text" id="uname"><br> 学生成绩：<input type="text" id="score"><br> <button id="btn">注册</button> <p id="p01"></p> <script> function get_id(id){ return document.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.onfocus = function(){ reg_name.lastIndex = 0; this.style.border = '1px solid #000' uname_flag = false; } uname.onblur = function(){ if(reg_name.test(uname.value)){ this.style.border = '1px solid #0f0'; uname_flag = true; }else { this.style.border = '1px solid #f00' } } btn.onclick = function(){ if(uname_flag){ // 1. var xhr; if(window.XMLHttpRequest){ //常规，如果有，直接使用 xhr = new XMLHttpRequest(); }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); } } </script>
三、用jQuery写ajax
原生的js写ajax显得比较复杂难以理解，这里，jQuery为我们提供了一种方法ajax（），这里我们一起看一下通过jQuery怎么写ajax
用户名：<input type="text" id="username">
<span id="ts"></span>
<br>
密码：<input type="text">
<button id="btn">验证用户名</button>
<script>
// 点击btn发送ajax请求
jquery代码
$("#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)
}
})
})
// 点击btn发送post请求
$("#btn").click(function(){
$.ajax({
type : "POST",
url : "http://192.168.9.154:8888/0221ajax/01.php",
data : {
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)
}
})
})
</script>
