57-AJAX和jQuery

一、AJAX
1.它是js的一种。它是web.发展的（B/S）的必然产物
它是由谷歌公司的谷歌地图带火的，能够提供异步请求技术，每当我们在地图上把鼠标重新移动一个位置的时候，我们按下ctrl+F12会发现了我们的客户端已经发送了一次请求，并且服务器给我们一个200的响应成功的标识，但是我们感觉到网页没有全部更新，只是局部的进行了更新了，这就是我们今天要介绍的AJAX
2.AJAX是请求是有 XML HTTP Request进行发送请求的
XmlHttpRequest（JS对象） xhr它是AJAX的核心引擎
3.AJAX是Asynchronous JavaScript And XML(异步的JS和XML的结合)
异步请求是不重新加载页面，对网页的某部分进行更新，（局部的刷新）
4.AJAX和传统的请求的区别

5.掌握AJAX请求的执行的流程
二二、了解原生的AJAX强求执行的流程

XMLHttpRequest
发送请求：

​ open(请求方式,请求地址,是否异步(默认为true)) 封装请求信息

​ send(请求参数) 发送请求 如果是GET请求 可以不用写 只在请求地址上指定好即可，而如果是POST请求，需要将请求数据写在方法参数中。

接收响应：

​ 事件：on readystate change 我们需要在就绪状态码为4的时候接收响应。

​ 但是响应不一定是有结果的，有些时候是404 500这些错误情况，所以我们应该再添加一个判断，判断响应是否是正常的。

​ 我们可以利用status属性来进行判断 ，它存储的就是HTTP的状态码，例如：200 正常响应 404 资源找不到 500 服务器错误.

​

​ 接收数据就是利用reponseText/responseXML将数据转换为对应的格式信息，然后我们好进行操作。

<!--
1.当输入了用户名之后(失去焦点)
2.判断此用户名是否在服务器数据库中存在
-->
用户名：<input type="text" name="uname" onblur="checkUname(this.value)"/>	
<span id="tip"></span>
<script type="text/javascript">
    // 提示对象
    var tipObj = document.getElementById("tip");

    /**
			 * 检查用户名是否存在
			 * @param {Object} uname
			 */
    function checkUname(uname){
        tipObj.innerHTML = "";
        // alert(uname);
        // 验证是否为空
        if("" == uname.trim()){
            tipObj.innerHTML = "<font color='red'>用户名不能为空！</font>";
        }else{
            // 发送请求 从服务器中检查此用户名是否存在
            // -----------------发送请求-----------------------
            // 使用异步引擎XMLHttpRequest对象发送(AJAX)
            // var xhr = new XMLHttpRequest();
            var xhr = getXmlHttpRequest();
            // 封装请求数据
            // xhr.open("GET","user?uname="+uname);
            xhr.open("POST","user");
            // POST要设置请求头内容
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 发送请求
            // xhr.send(null);
            xhr.send("uname="+uname);

            // -----------------接收响应-----------------------
            // 当readystate就绪码为4(读取响应完成)   status为200(服务器正常响应)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 将响应的数据取出   1表示存在  0表示不存在
                    var result = xhr.responseText;
                    if(result == 1){
                        tipObj.innerHTML = "<font color='red'>该名称太抢手了！换一个吧！</font>";
                    }else{
                        tipObj.innerHTML = "<font color='green'>此名称非常符合您的身份！</font>";
                    }
                }
            }
        }

    }

    // 解决IE兼容性问题			 
    function getXmlHttpRequest(){
        if(window.XMLHttpRequest){ // 支持此对象
            return new XMLHttpRequest();
        }else{ // IE浏览器
            return new ActiveXObject("Microsoft.XMLHttp");
        }
    }
</script>

2.3 掌握jQuery操作AJAX

jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

// 发送AJAX请求 
/*	
url：请求地址
type：请求方式
data：请求数据(如果是GET请求 可以省略)
dataType：接收的响应内容的格式
success:成功响应的回调函数  ==  if(readystate == 4 && status == 200)
		result：响应的结果值
error：错误回调  当出现404  500 等结果时 会触发的回调函数
*/
$.ajax({
    url:"",
    type:"",
    data:"",
    dataType:"",
    success:function(result){

    },
    error:function(){

    }
});

## 3. 掌握JSON的使用

#### 3.1 JSON介绍

**发送请求数据：**xxx?xxx=xxx&xxx=xxx....

**响应回来的数据：**

​	**JSP：**将数据存储在作用域  然后页面再从作用域取出来

​	**HTML->JS：**我们借助于AJAX技术，可以直接接收来自服务端的数据响应。

​			但是很多时候，我们需要接收的是一系列的值，例如数组、集合、对象...

​			可惜JS只能解析字符串。

**想到的解决方案：**纯字符串、XML型字符串（最初目的：数据传输格式）。

JSON（JavaScript  Object Notation）   轻量级的数据交换格式

报文

JS内置了JSON的解析插件。

JSON格式简单、且易于解析。

#### 3.2 JSON的语法

**JSON可以表示普通字符串：**

```json
var jsonStr = "hehe";

**JSON可以表示对象：**JSON强制要求键必须用双引号 当然也可以省略

var jsonObj = {"id":7,"uname":"admin","pwd":"123456","isVIP":true};

3.2JSON可以表示数组(集合…)：

var jsonArr = ["xxx","xxx","xxx"];
var jsonObjArr = 
[
	{
		"id": 1,
		"uname": "xiaohan",
		"gender": 1
	},
	{
		"id": 2,
		"uname": "xiaoming",
		"gender": 2,
		"hobbies": [
			"swimming",
			"chess"
		]
	}
]