EasyDemo*Ajax简介&小案例demo(on Github)

源码demo:https://github.com/Way123Ne/htmAndcssAndJs/tree/master/AjaxDemo1/WebRoot

一、AJAX

1. Ajax

1.1Ajava原理

1.1.1注册时存在的问题

1.1.2什么是Ajax

*Aysnchronous JavaScript and Xml是异步的JavaScript和Xml

*AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发送请求

*服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容

1.1.3Ajax工作原理

1.1.4如何获得Ajax对象

1.2Ajax对象属性和方法

1.1.1异步对象的属性和方法

1.1.2onreadystatechange

* onreadystatechange:绑定一个时间处理函数，该函数用来处理readystatechange事件

*注：当Ajax对象的readyState的值发生了改变，比如：从0到1，就会产生readystatechange事件

1.1.3readyState

* readyState:一共有5个值，分别是0,1,2,3,4,分别表示Ajax对象与服务器通信的状态

*比如：当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据

1.3使用Ajax发送异步请求

1.1.1发送异步请求的步骤

1>获取Ajax对象:获取XMLHttpRequest对象实例

2>设置回调函数:为Ajax对象的readystatechange事件设定响应函数

3>创建请求:调用XMLHttpRequest对象的open方法

4>发送请求:调用Ajax对象的send方法

1.1.2获取Ajax对象

1.1.3编写回调事件处理函数

1.1.4创建请求-GET请求

*注意:

-true:表示发送异步请求(当Ajax对象发请求时，用户仍然可以对当前页面做其他的操作)

-false:表示发送同步请求(当Ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作)

1.1.5创建请求-POST请求

*setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下xhr(即Ajax对象)不会添加该消息头，所以，需要调用setRequestHeader方法，添加这个消息头

1.1.6发送请求

*GET请求

-send方法内传递null

-阮瑶提交数据，则在open方法的”URL”后追加,如：

1.1.7编写服务器端代码

*服务器返回的一般是部分数据，比如一个简单的文本

1.1.8Ajax的应用

*输入的值需要校验，如检测注册的用户名是否已被占用

*搜索时出现的自动提示列表

*级联显示

*数据录入和列表显示在同一个页面

*不需要刷新的翻页