09-Ajax

一.Ajax的介绍

1.Ajax介绍

1, Ajax的概念
      AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言

2, Ajax的作用
      允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页
3, Ajax的核心
      Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR) 

4, 创建XHR对象
      var xhr = new XMLHttpRequest();
      console.log(xhr);   //XMLHttpRequest

      XHR对象支持IE7+、Firefox、Opera、Chrome 和 Safari 等浏览器, 但是不支持IE6.
      如果要支持IE6, 则需要使用ActiveX对象通过传入参数Microsoft.XMLHTTP来实现.
      var xhr = new ActiveXObject("Microsoft.XMLHTTP");

Ajax介绍.png

2.表单get

<form action="http://localhost/get.php" method="get">
    <input type="text" name="user" />
    <input type="password" name="pwd" />
    <input type="submit" value="提交" />
</form>

3.表单post

<form action="http://localhost/post.php" method=“post">
    <input type="text" name="user" />
    <input type="password" name="pwd" />
    <input type="submit" value="提交" />
</form>

4.异常处理

alert(a);    有异常错误
            
try{
    //代码尝试执行这个块中的内容, 如果有错误，则会执行catch{}， 并且传入错误信息参数
    alert(a);
}catch(e){   //捕获异常
            
    alert(e);
}

5.json

var json = {“name”:”xiaoming”} 


数组中有json
[
 {“name”:”xiaoming”} ,
  {“name”:”xiaoLi”} ,
]

Json与字符互转

JSON.stringify()                    将json转字符串
JSON.parse()                         将字符串格式json转json对象

6.返回状态码

XMLHttpRequest对象的属性和方法
XHR提供的方法:
open(): 准备好需要发送给服务器的内容.
接收三个参数: 要发送的请求类型(get/post), 请求的URL和是否异步.
如:xhr.open(‘get’, ‘demo.json’, false);  //URL为demo.json的get请求, false表示同步.

send(): 向服务器发送请求.
接收一个参数:请求体发送的数据. 如果是get方式请求则填null.
如: xhr.send(null);   

XHR提供的属性:
当请求发送到服务器端后, 服务器就会向客户端发送响应, 收到响应数据后, 响应的数据会自动填充XHR对象的属性. 一共有四个属性：
status: 响应的HTTP状态码 
statusText: HTTP状态码的说明 
responseText:  作为响应主体被返回的文本 

其中status属性: 
HTTP状态码, 一般我们只需要关心HTTP状态代码为200则表示请求服务器成功.

HTTP状态码.png

异步请求
      异步调用的时候, 需要触发readystatechange事件, 然后检测readyState属性的值即可, readyState属性的值有5个, 最常用的是最后一个值:4,表示已经接收到了全部响应数据.

readyState返回码.png

二.异步请求

var xhr = null;
try {
    xhr = new XMLHttpRequest();
} catch(e) { //如果有异常则抛出异常
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//使用open()方法, 设置true表示异步请求 
xhr.open('get', 'demo.json', true); 
//向服务器发送请求
xhr.send(null); 
//监听状态改变
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {  
          if (xhr.status == 200) {  
      console.log(xhr.responseText); 
          } else {
      consolel.log(‘error. 状态码: ’ + xhr.status + ‘错误信息:’+ xhr.statusText);
          }
     }
};

三.HTTP协议

HTTP协议： 
      HTTP是一个属于应用层的面向对象的网络协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统.  

HTTP协议的主要特点有:   Client/Server模式， Brower/Server模式
      1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式, 必须先请求才能得到响应， 服务器不能通过http协议直接发送数据给客户端
      2, 简单快速,  客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
      3, 灵活, 传输数据类型种类多
      4, 无连接,  请求一次服务器后立刻断开连接, 即非长连接 即短连接   
      5, 无状态,  HTTP协议对事务处理没有记忆能力; session
    
HTTP协议的请求方式: GET, POST, HEAD, PUT等
HTTP包含: 请求头和请求体

1.GET请求

GET请求: 
      在通过HTTP协议向服务器请求的过程中, 有两种最常用的请求方式, 分别是: GET和POST. 
      在Ajax使用的过程中，GET的使用频率又要比POST高得多. GET请求最常用于向服务器获取数据, 也可以将少量字符串参数提交给服务器.
如: 
xhr.open('get', ‘login.php?username=zhang&pwd=123456', true);

通过URL后的问号?给服务器传递键值对数据, 服务器接收到请求后可以从中获取到对应的数据

2.POST请求

POST请求
      POST请求可以包含非常多的数据, 我们在使用表单提交的时候, 很多就是使用的POST传输方式。
xhr.open('post', 'demo.php', true);

POST请求向服务器发送的数据, 不会跟在URL后面, 而是通过send()方法向服务器提交数据。
xhr.send('name=Zhang&age=100');

POST请求和Web表单提交不同, 需要使用XHR来模仿表单提交.
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

从性能上来讲POST请求比GET请求消耗更多一些, 用相同数据比较, GET比 POST快. 这也是我们GET请求的使用率大于POST的原因.

四.访问后台数据

1.JQ与ajax

type: HTTP的请求方式（get或post）， 默认是get
url: 接口， 必需 
data: 参数（需要提交给服务器的数据） 
async: 是否异步， 默认是true 
success: 表示请求成功之后的响应 
error: 表示请求失败之后的响应 
$.ajax({ 
    type: "get",  
    data: {},  
    async: true, 
    success: function(data){ 
        console.log(data) 
    }, 
    error: function(e){ 
        console.log(e) 
    } 
}) 

2.简化ajax

$.ajax({
    url: "http://60.205.181.47/myPHPCode2/person.php",
    success: function(data){
            console.log(data)
    },
    error: function(e){
            console.log(e)
    } 
})

3. .post

get请求， 不能得到失败后的响应
$.get("http://60.205.181.47/myPHPCode2/person.php", function(data){
        //console.log(data)
        var arr = JSON.parse(data)
})
                    
        
            
带参数的HTTP请求
$.post("http://60.205.181.47/myPHPCode2/checkname.php", {regname:"zhangsan"}, function(data){
        //console.log(data)
        console.log("post")
})