javascript-AJAX
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 >
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 >
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');
固定写法