Ajax的基本概念

1.Ajax概念

1. AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术

传统交互方式：
缺点：
发送的请求是一个同步请求，销毁页面就不能继续操作
修改的数据仅仅是页面中一小部分，然后响应的却是整个完整页面，浪费网络传输资源
Ajax交互方式：

优点：
异步请求，发送请求的同时还可以继续操作页面。页面不销毁；
返回部分数据，减少不必要的数据承传输，减少网络资源。页面不刷新，而是更新页面部分数据。
总结：
ajax出现的缘由：更好的提升用户的体验，以及提升服务器的效率，减少网络中不必要的数据的传送。
1.Ajax使用场景

1. 自动提示：百度输入框自动提示功能；【演示】
2. 用户名重复检查：用户注册时，检查用户名是否存在，及时给用户反馈；【代码实现】
3. 邮箱提示：WEB版邮箱系统，当有新邮件到达服务器，浏览器不用刷新页面也知道是否有新邮件；
4. 无刷新分页：显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；
5. 购物车：用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；
6. 用户登录：用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；
7. 视频网站，商城网站【淘宝】；
8. 股票网站；
   …
   秘诀：浏览器网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景； 99%的网站都会用到Ajax；
   如何获取Ajax对象
9. Ajax实质
10. 写ajax代码就是写js代码；
    (1) a标签
    (2) 浏览器地址栏
    (3) Form表单
    (4) Java 语言：涉及到了所有的语言
    (5) Js也是计算机命令：纯面向对象：js也是可以向后台发送请求的
11. 计算机命令：核心就要看到在用计算机命令处理数据
12. 语法学习： num = 10
13. 数据类型:number string boolean Object
14. 流程控制:顺序,选择，循环
15. 函数：？
16. 面向对象

1. 静态属性
2. 动态行为

2. 学习ajax其实是学习使用ajax（XMLHttpRequest对象）对象发异步请求；
3. 利用Ajax发请求的实质：通过浏览器Ajax对象发送异步请求，将响应的数据局部更新到页面；
   1.同步和异步
   同步：你先做完我再做，后一步的操作必须要等待前一步操作的结果。
   异步：各做各的相互不干扰（效率高），不用等上一步的操作执行完就执行下一步。
   【例子：线程中也有同步异步的概念，买衣服（挑衣服，试衣服，付款）】
   1.1如何获取Ajax对象【掌握】
4. AJAX对象本身是浏览器中的一个对象，但在低版本IE中表现为一个ActiveX。所以在使用JavaScript语言进行创建该对象时，需要区分不同的浏览器【版本兼容】
5. 有时候我们会把XMLHttpRequest对象称为AJAX对象，或异步对象
   创建方式1：判断方式

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){//针对其它主流浏览器
		xhr = new XMLHttpRequest();
	}else{//针对低版本的ie浏览器
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	return xhr;
}

创建方式2：try…catch…方式

var ajax;
	try {
		//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了
		ajax  = new XMLHttpRequest(); 
	} catch (e) {
		//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)
		ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
	}

4. Ajax的Api
   https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open
   1.onreadystatechange事件
   onreadystatechange需要绑定一个事件处理函数，该函数用来处理readystatechange事件。当AJAX对象的 readyState的值发生了改变时，该事件由系统触发。比如，从0变成了1，就会产生readystatechange事件。在当前不同的处理状态 下，可以进行状态的捕获，做些相应处理。每一次的状态变化都会触发onreadystatechange绑定的处理函数，只是大部分时候我们只需要知道从 3变为4，即当前readyState为4时这个状态，此时数据响应已返回，并接收成功，等待下一步的处理。大部分的格式如下：

xhr.onreadystatechange=function(){
        		//… … 
       	//处理返回的数据
//此函数中最需要的目的是为了获取正确的数据（成功接收数据，并且是正确的数据）
};

1.readyState请求状态

1. readyState代表请求的状态，使用不同的数字代表一个状态：
   0：还没有调用send()方法
   1：已经调用send()，正在发送请求
   2：send()调用完成，已接收全部响应内容
   3：正在解析响应内容
   4：响应内容解析完毕，可以在客户端获取并使用了
2. 对于状态的判断书写代码的格式如下：

xhr.onreadystatechange=function(){
	if(xhr.readyState == 4){//已经接收到服务器响应的内容了
    		var txt = xhr.responseText;
     		//展示数据到页面
     	 }//这里最后不要写else，因为状态从0-1-2-3都会触发else
};

3. 但是状态并不能保证回来的数据就是我们想要的数据，也可能是发回的错误提示。所以要想保证接受到的数据就是成功响应的数据，还需添加对另一个属性的判断——status。这个属性代码响应的状态码，200代表成功，404代表没有找到资源，500代表服务器发生了运行异常；
4. 服务器数据接收成功并且成功响应

if(xhr.readyState == 4 && xhr.status == 200){
	var txt = xhr.responseText;//接收服务端响应回来的数据（responseText只接收text文本）
          document.getElementById("uname").innerHTML = txt;
}else{
           //发生了错误
           document.getElementById("s").innerHTML ='验证用户名出错';
}

4.Ajax的编写步骤【掌握】
1.生活案例：发送一个包裹

1. 找到一个发送包裹的地点（获取ajax对象）
2. 准备好包裹
3. 设置一个状态监听事件（发货单），查看或监听包裹发送的状态（未发送，已发送，在路上，已接收等状态）
4. 发送包裹
   1.Ajax发送请求实现骤
5. 获取ajax对象（已经获取）
6. 准备发送请求：xhr.open(“get”,”/xx/add”)
7. 设置回调函数（主要是获取服务器返回的正确数据）：

xhr.onreadystatechange = function(){}
readyState == 4 && status == 200

4. 发送请求：xhr.send()
   1.1.10. 使用ajax对象发送get请求
5. 获取ajax对象（已经获取） – 外部js文件中，当然也可以自己重新获取一次
6. 准备发送请求：xhr.open(‘get’,’uri?name=value’,true)
7. 设置回调函数：

xhr.onreadystatechange = function(){
If(readyState == 4 && status == 200){
var text = xhr.responseText;
alert(txet);
}
}

4. 发送请求：xhr.send(null)
   代码实现：获取后台的数据更新到div中
5. 测试获取readyState状态/有的浏览器0这个状态出不来
6. 测试不写后台代码，获取404页面的状态
7. 测试页面不刷新，局部更新
8. 测试正确状态
   1.使用ajax对象发送post请求（多一步）
9. 获取ajax对象（已经获取） – 外部js文件中，当然也可以自己重新获取一次
10. 准备发送请求：xhr.open(‘post’,’uri’,true)
    参数可以在这里写，后台也可以获取到，但是一般post的请求参数不会直接写在地址栏中
11. 设置回调函数：

xhr.onreadystatechange = function(){
If(readyState == 4 && status == 200){
var text = xhr.responseText;
alert(txet);
}
}

4. 设置请求头：xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
   注意：该操作必须在open与send之间调用；
   原因：
   a. open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；
   b. send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；
   c. 如果js中没有参数传递到后台，可以省略这一步
5. 发送请求：

xhr.send(‘key=value’);