五、（1）Ajax原理及使用

Ajax原理

Ajax介绍

什么是Ajax技术

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

　　通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

为什么要采用Ajax技术

优点:

　　使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的html代码信息。

1. 减轻服务器负担，按需要获得数据。
2. 无刷新更新页面，减少用户的实际和心理的等待时间。
3. 更好的用户体验。
4. 减轻宽带的负担。
5. 主流浏览器支持。

缺点:

1. AJAX大量使用了Javascript和AJAX引擎，，使用AJAX的程序必须测试针对各个浏览器的兼容性。
2. AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的。
3. 对搜索引擎支持不好。

Ajax的原理

　　Ajax的原理简单来说通过浏览器的javascript对象XmlHttpRequest(Ajax引擎)对象来向服务器发异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出,同时Ajax引擎也接收服务器返回响应的数据,所以不会导致浏览器上的页面全部刷新。

举例:

　　传统方式：浏览器向后端发送请求，后端响应数据给前端，浏览器接收数据，渲染页面，浏览器要“刷新”。

Ajax方式：浏览器创建ajax对象，ajax对象向后端发送请求，后端接收请求响应数据给前端，ajax对象接收响应数据通过dom操作更新视图，整个过程浏览器“不刷新”。

　　真正的请求是由Ajax引擎发出.不是由浏览器窗口发出,所以浏览器窗口是不会刷新的, Ajax引擎同时也接收服务器返回的响应内容。

Ajax引擎

什么是Ajax引擎

　　Ajax引擎就是XMLHttpRequest对象,所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。它同是也是一个Javascript对象。

为什么使用Ajax引擎

　　Ajax引擎(XMLHttpRequest)是Ajax综合技术的核心,其作为浏览器页面和服务器交互的一个桥梁.

　　通常是Javascript监听浏览器网页事件(点击,提交,更改等),由Javascript创建Ajax引擎对象,通过Ajax引擎对象发出请求.Ajax引擎等待并且接收服务器的响应内容,Javascript再从Ajax引擎对象中获取响应内容并且改变网页界面显示效果。

如何创建Ajax引擎对象

非IE浏览器和高版本的IE浏览器：var obj = new XMLHttpRequest();

低版本的IE浏览器：var obj = new ActiveXObject(“Microsoft.XMLHTTP”);

Ajax对象属性和方法

方法：

abort	取消当前请求
getAllResponseHeaders	获取响应的所有http头
getResponseHeader	从响应信息中获取指定的http头
open(方式get/post，url地址，同步异步)	创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send()	发送请求到http服务器并接收回应
setRequestHeader	单独指定请求的某个http头，header()设置http头协议信息

属性：

onreadystatechange*	指定当readyState属性改变时的事件处理句柄。只写
readyState	返回当前请求的状态，只读.，ajax行进过程中不同状态
responseBody	将回应信息正文以unsigned byte数组形式返回.只读
responseStream	以Ado Stream对象的形式返回响应信息。只读
responseText	将响应信息作为字符串返回.只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读
status	返回当前请求的http状态码.只读，200 ok 304 缓存； 404 not found; 403 没有权限 501 服务器级别错误
statusText	返回当前请求的响应行状态，只读 ok not found forbidden

使用ajax发送get请求

//1.创建ajax对象
    var xhr = new XMLHttpRequest();

//2.配置请求方式和请求地址
   xhr.open(“get”,”xxx地址”);
    //如果要传入参数
    xhr.open(“get”,”xxx地址?参数名1=参数值1&参数名2=参数值2”)

//3.发送请求
   xhr.send();

//4.监听状态变化&接收响应数据
   xhr.onreadystatechange = function(){
        if(xhr.readyState===4 && xhr.status===200){
               var data = xhr.reponseText;
        }
  }

使用Ajax引擎对象的完整步骤(使用get发送请求)

1.创建ajax对象：XMLHttpRequest是ajax引擎对象，挂载在window下，通过new创建。

var xhr = new XMLHttpRequest();

2.配置请求方式和地址

open('参数1','参数2','参数3')
'参数1':请求方式
'参数2':请求地址
'参数3':true|false 控制是否是异步

xhr.open('get','./serve/data.json');

3.发送：send方法发送请求，可以传入参数。

 xhr.send();

4.监听状态和接收数据：onreadystatechange是一个监听事件(监听ajax对象的状态(readyState)变化，整个过程中readyState状态值会不断发生改变)

readyState:一共有五个值(状态4需要记忆)

0 刚创建的ajax对象状态为0
1 调用了open方法之后
2 后端接收请求
3 后端处理数据，响应数据中，数据可能没有完全传输完
4 数据传输完成已就绪，放在responseText属性中。

status:状态码

responseText:存放后端响应的数据，是字符串格式

xhr.onreadystatechange = function(){
    // console.log(xhr.readyState);
    if(xhr.readyState===4 && xhr.status===200){
        var data = xhr.responseText;
        console.log(data);
    }
}

使用Ajax引擎对象的完整步骤(使用post发送请求)

//1.创建ajax对象
   var xhr = new XMLHttpRequest();

//2.配置请求方式和请求地址
    xhr.open(“post”,'xxx地址');

//3.设置请求头
    xhr.setRequestHeader(“Content-Type”,”application/x-www-form-encoded”);

//4.发送
    xhr.send();

//5.监听状态和接收数据
    xhr.onreadystatechange = function(){
       if(xhr.readyState===4 && xhr.status===200){
          var data = xhr.responseText;
       }
    }

案例：Ajax发送GET方式的请求

GET方式的请求通过url地址传递请求参数

ajax引擎对象.open(‘GET’,’可以带参数的url地址’);
ajax引擎对象.onreadystatechanage = function(){};
ajax引擎对象.send();

1. 注册页面中的Javascript和HTML代码:

userReg.html get方式

<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<form>
    <p>账号 <input type="text" name="username" id="username" />
　　　　<span id="errorMSG"></span></p>
    <p>密码 <input type="password" name="pwd" id="pwd" />    </p>
　　<p><input type="submit" name="btnTJ" id="btnTJ" value="提交" /></p>
</form>
<script type="text/javascript">
var userName=document.getElementById("username");
var errorMSG=document.getElementById("errorMSG");
userName.onblur=function () {
//1
var ajax=createXHR();
//2 get方式把传送的值附在网址后面
ajax.open("GET","/users/u/"+userName.value);
//3
ajax.onreadystatechange=function () {
if(ajax.readyState==4 && ajax.status==200)
{
　　//根据服务器端返回的结果判断是否能注册
　　var result=ajax.responseText;
if(result=="true")
{
　　userName.style.border="solid 2px red";
　　errorMSG.innerHTML="<font color=red>账号存在，不能注册</font>"
}
else
{
　　userName.style.border="solid 2px green";
　　errorMSG.innerHTML="<font color=green>恭喜，可以注册</font>"
　　　　}
　　}
};
//4用户名已存在，不允许注册
ajax.send();
}
</script>

//提交后响应：用户名已存在，不允许注册

案例：Ajax发送POST方式的请求

POST方式的请求通过send方法传递请求参数

ajax引擎对象.open(‘POST,’url地址’);
ajax引擎对象.onreadystatechanage = function(){};
ajax引擎对象.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//仿form的数据提交给服务器
ajax引擎对象.send(‘name1=value1&name2=value2’);

1. 注册页面中的Javascript代码:

userReg.html post方式

<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<form>
<p>账号 <input type="text" name="username" id="username" /> <span id="errorMSG"></span></p>
<p>密码 <input type="password" name="pwd" id="pwd" /></p>
<p><input type="submit" name="btnTJ" id="btnTJ" value="提交" /></p>
</form>
<script type="text/javascript">
var userName=document.getElementById("username");
var errorMSG=document.getElementById("errorMSG");
userName.onblur=function () {
//1
var ajax=createXHR();
//2 post方式把传送的值通过send发送
ajax.open("POST","/users/checkUser/");
//3
ajax.onreadystatechange=function () {
if(ajax.readyState==4 && ajax.status==200)
{
　　//根据服务器端返回的结果判断是否能注册
　　var result=ajax.responseText;
if(result=="true")
{
　　userName.style.border="solid 2px red";
　　errorMSG.innerHTML="<font color=red>账号存在，不能注册</font>"
}else
{
　　userName.style.border="solid 2px green";
　　errorMSG.innerHTML="<font color=green>恭喜，可以注册</font>"
　　　　}
　　}
};
//4-1 设置为表单post方式发送
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4-2 post方式把传送的值通过send发送
ajax.send("username="+userName.value);
　}
</script>
//提交后的请求和响应:未找到数据，允许用户注册
//数据已存在，不允许注册

同步和异步

同步:就是在发出一个功能调用时，在没有得到结果之前，不能够继续调用其他功能。
异步:异步的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果,程序继续向下执行。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。
同步是阻塞模式，异步是非阻塞模式。

发送请求的区别:

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

Ajax中的异步

　　Ajax中的异步请求是异步的真正的实现，是指用户页面(HTML)没有直接和服务器打交道而是通过Ajax引擎间接和服务器打交道的, 而用户页面和Ajax引擎打交道时并不会等待服务器返回的响应内容,而页面中的Javascript代码继续执行,也可以继续发出新的Ajax请求。

Ajax异步实现

Ajax引擎通过open方法指定是否为异步请求或者是同步请求.
ajax引擎读对象.open(方式get/post，url地址，同步异步). 第三个参数为true表示异步,默认为true
异步请求是Ajax引擎对象发出请求后不会等待响应的返回,javascript代码继续向下执行.

Ajax同步实现

ajax引擎读对象.open(方式get/post，url地址，同步异步). 第三个参数为false表示同步.
同步只有在发出请求后写代码得到响应结果时用到.

使用jQuery发送ajax的三种不同方式

//1.get
    $.get('xxx地址',{
        “属性名1”:”属性值1”,
        “属性名2”:”属性值2”
    },function(data){
        //data存储就是后端响应的数据
        console.log(data);
    });

//2.post
    $.post('xxx地址',{
        “属性名1”:”属性值1”,
        “属性名2”:”属性值2”
    },function(data){
        //data存储就是后端响应的数据
        console.log(data);
    });

//3.万能模式
   $.ajax({
       url:”xxx地址”,
       type:”请求方式”,
       dataType:”json” , //告诉后端我们想要的数据格式
       data:{
            “参数名1”:”参数值1”,
            “参数名2”:”参数值2”        
       },
       success:function(data){
          //data存放的就是后端响应的数据
          console.log(data);
      }
   })

JSON

定义

JSON(JavaScript Object Notation)的中文名字是javaScript对象表示法，是一种轻量级的数据存储和交换格式。
json是前后端数据传输的一种格式
是一个对象，以键值对的方式存在，如果是以.json结尾的文件，键(key)一定要以“双引号”括起来。

为什么要使用JSON

JSON 比 XML 更小、更快，更易解析。
类似 XML

1. JSON 是纯文本
2. JSON 具有“自我描述性”（人类可读）
3. JSON 具有层级结构（值中存在值）
4. JSON 可通过 JavaScript 进行解析
5. JSON 数据更加适合于AJAX 进行传输

相比 XML 的不同之处

1. 没有结束标签
2. 更短
3. 读写的速度更快
4. JSON格式的字符串能够使用内建的 JavaScript eval() 方法进行解析成JSON对象
5. 使用数组
6. 不使用保留字

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用.

缺点: JSON不能被其他程序验证是否有效. 例如dtd验证xml,但不能够验证JSON

语法

1. 简单JSON对象语法: {‘名字’:’值’} 表示对象

2. 简单的数组JSON对象语法: [{‘名字’:’值’}] 表示数组,只是数组中存放JSON对象

3. 数组和JSON语法混用:即:数组中可以包含JSON对象,JSON对象中也可以包含JSON对象,JSON对象也包含数组。

{‘名字’:[{‘名字’:值},{‘名字’:值}]}: 表示值是一个数组,数组中存放的多个对象.

语法细节:

 数据在名称/值对中
 数据由逗号分隔
 花括号保存对象
 方括号保存数组

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值,冒号相当于等号.

名称书写要求: 可以使用单引号和双引号,也可以不写.

值的要求:

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

如何使用JSON

JSON是Javascript中的对象，MongoDB返回的数据就是JSON格式的字符串，通过Ajax请求得到后可以直接使用。

大写的JSON是一个js内置对象，有两个方法:

a. parse 把字符串格式的json数据转换为对象
b. stringify 把json对象转换为字符串.

第一个案例:

javascript代码作为字符串:

执行字符串中的javascript代码:

第二个案例:

作业

1. JSON方式（用json数据）验证Email是否已经存在，存在提示错误。

2. 用原生js方式分别编写ajax发送get请求和post请求的代码

get方式：

<script>
    //1 创建ajax对象
    let xhr=new XMLHttpRequest();
    //2 配置地址和请求方式
    xhr.open("get","./date.json?name=hdy&&pwd=123",true);
    //3 发送
    xhr.send();
    //4 监听状态
    xhr.onreadystatechange=function () {
        if (xhr.readyState===4 && xhr.status===200){
            let parse = JSON.parse(xhr.responseText);
            console.log(parse);
        }
    }
</script>

post方式：

<script>
    let xhr = new XMLHttpRequest();//1.创建

    xhr.open("post", "./date.json");//2.配置地址

    //3.设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-encoded');
    //4.发送
    // xhr.send();//不传参数
    xhr.send("name=hdy&&email=374644472@qq.com");//传参数

    //5.监听状态变化&&接收数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let text = xhr.responseText;
            console.log(text)
        }
    }
</script>

3. 编写jquery发送ajax请求的三种方式