一、一些基本概念
1.什么是ajax
ajax：async JavaScript and xml。是前后台通信的一种手段，一种方式。
2.使用场景
3.get和post的区别
get参数是在地址栏中，大小2000个字符左右
post参数是在请求体中，网速良好，理论上是无限大的。
二、原生js写ajax
1、创建ajax对象-xmlhttprequest对象
注意这里存在兼容性问题：
@H_404_33@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
5xx 服务端错误
@H_404[email protected] = function(){
console.log(‘xhr的状态码发生了改变‘);
console.log("状态码:" + xhr.readyState);
console.log(‘响应码：‘ + xhr.status);
console.log(‘响应文本:‘ + xhr.responseText);
console.log(‘\n‘);
}
3.创建请求的消息，连接服务器（状态码0=>1）
4.发送
这里如果是post请求，就传post参数，如果是get请求，发送null就行了。
例如：用ajax发送get请求：
@H_404_33@用户名：<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>
</script>
用ajax发送post请求：
@H_404_33@ 学生姓名：<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
@H_404_33@用户名：<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()
},error : function(err){ //错误的
console.log(err)
}
})
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
