Ajax发送请求

1，什么是ajax？

　　Asynchronous JavaScript and XML（当然现在xml已经由json代替）；

　　主要是用于前后台的交互（表单提交已经被废弃）；

　　使用场景：前台获取数据、表单的失焦验证；

 

---

 

2，如何在有服务的环境下使用ajax发送请求

　　1.创建ajax对象-xmlhttprequest对象：（分为两种类型）

　　　　在新版本的浏览器中：variable=new XMLHttpRequest();

　　　　老版本的IE中：variable=new ActiveXObject("Microsoft.XMLHTTP");

　　　　所以在这里我们需要考虑到兼容性的问题：　

　　　　　var xhr;if(window.XMLHttpRequest){    //常规，如果有，直接使用xhr = new XMLHttpRequest();}else{   //如果没有，老版本IExhr = 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部分：

用户名：<input type="text" id="username"><span id="ts">span><br>
密码：<input type="text"><button id="btn">验证用户名button>

 

原生js部分：

 

---

 

4,使用ajax发送post请求

 html:

学生姓名：<input type="text" id="uname"><br>
学生成绩：<input type="text" id="score"><br>
<button id="btn">注册button>    
<p id="p01">p>

 

原生js部分：

 

 

---

 

5,使用jQuery—ajax发送get请求

用户名：<input type="text" id="username"><span id="ts">span><br>
密码： <input type="text"><button id="btn">验证用户名button>

$("#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()},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)}})
})