ajax是什么?AJAX - asynchronous JavaScript and Xml，中文直译 - JavaScript和XML的异步，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。ajax实现的B/S架构下的异步交互(B/S架构:即B/S结构即浏览器和服务器结构,Browse/Server缩写)。
同步与异步的区别：同步交互，客户端向服务器端发送请求，到服务器进行响应，这个过程，用户是不能做其他任何事情(等)，执行速度相对较慢,响应完整的HTML页面；异步交互，客户端向服务器端发送请求，到服务器进行响应，这个过程，用户是可以做其他任何事情(不等)，执行速度相对较快,响应部分数据。
以下是ajax的两种请求POST请求与GET请求：
1.post请求：
html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生ajax-post请求</title> 6 </head> 7 <body> 8 <button>按钮</button> 9 </body> 10 <script> 11 var oBtn=document.getElementsByTagName('button')[0]; 12 oBtn.onclick=function(){ 13 //创建ajax核心对象 14 var xhr=getXhr(); 15 function getXhr(){ 16 var xhr=null; 17 if(window.XMLHttpRequest){//其他浏览器 18 xhr=new XMLHttpRequest(); 19 }else{ 20 xhr=new ActiveXObject('Microsoft.XMLHttp') 21 } 22 return xhr; 23 } 24 //处理ajax的核心对象的执行结果 25 xhr.onreadystatechange=function(){ 26 if(xhr.readyState==4){ 27 if(xhr.status==200){ 28 console.log(xhr.responseText); 29 } 30 } 31 }; 32 // 33 xhr.open('post','post.php',true); 34 //post不设置请求头会让后端不认识你发送的信息 35 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 36 //发送请求 37 xhr.send("username=小明&job=IT&age=20"); 38 } 39 </script> 40 </html>
post.php：
1 <?php 2 header('content-type:text/html;charset="utf-8"'); 3 error_reporting(0); 4 $username = $_POST['username']; 5 $age = $_POST['age']; 6 $job = $_POST['job']; 7 8 echo "你的名字：{$username}，年龄：{$age}，工作：{$job}";
服务器状态下测试，然后在控制台输出了 你的名字：小明，年龄：20，工作：IT
2.get请求
html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生ajax-get请求</title> 6 </head> 7 <body> 8 <button>按钮</button> 9 </body> 10 <script> 11 var oBtn=document.getElementsByTagName('button')[0]; 12 oBtn.onclick=function(){ 13 //创建ajax核心对象 14 var xhr=getXhr(); 15 function getXhr(){ 16 var xhr=null; 17 if(window.XMLHttpRequest){//其他浏览器 18 xhr=new XMLHttpRequest(); 19 }else{ 20 xhr=new ActiveXObject('Microsoft.XMLHttp') 21 } 22 return xhr; 23 } 24 //处理ajax的核心对象的执行结果 25 xhr.onreadystatechange=function(){ 26 if(xhr.readyState==4){ 27 if(xhr.status==200){ 28 console.log(xhr.responseText); 29 } 30 } 31 }; 32 // 33 xhr.open('get','get.php?username=小明&job=IT&age=20',true); 34 //发送请求 35 xhr.send(); 36 } 37 </script> 38 </html>
get.php：
1 <?php 2 header('content-type:text/html;charset="utf-8"'); 3 error_reporting(0); 4 $username = $_GET['username']; 5 $age = $_GET['age']; 6 7 echo "你的名字是：{$username}，年龄：{$age}";
控制台输出了 你的名字是：小明，年龄：20
最后总结下：
实现ajax的异步交互步骤：
1、创建XHR核心对象
固定写法
2、与服务器建立连接
使用XHR对象的open(method,url)
3、向服务器发送请求
使用XHR对象的send(请求参数)
请求参数必须是键值对key=value
4、接受服务器端的响应数据
使用XHR对象的onreadystatechange事件，监听服务器端的通信状态
使用XHR对象的readyState属性，判断服务器端的当前状态(0-4)
使用XHR对象的status属性，判断服务器的状态码(200)
使用XHR对象的responseText属性，接受服务器端的响应数据
ajax具有核心对象
XMLHttpRequest对象
var xhr=getXhr();
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){//其他浏览器
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp')
}
return xhr;
}
ajax核心对象XHR
属性
readyState
status
方法
open(method,url) - 与服务器建立链接
send("key=value") - 向服务器端发送请求
事件
onreadystatechange事件
作用 - 监听
GET与POST的区别
GET请求
send()方法不起作用，但是不能省略
xhr.send(null)
请求参数 - 添加到URL？key=value
POST请求
send()起作用
在send()方法被调用之前使用xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
固定写法