Ajax
Asynchronous JavaScript And XML 异步javascript和xml
AJAX并不是JavaScript的范畴,只是用JavaScript执行异步网络请求而已。
通常JavaScript用Ajax技术提交表单,上传文件,跨域等操作
传统的网页,如果需要更新内容,那必须重载页面,而使用AJAX在不重载整个页面的情况下,和后端服务交换数据并更新显示。
XHR对象
XMLHttpRequest对象用于在和后端服务器交换数据。
XMLHttpRequest简称XHR 。通常绝大多数游览器都支持XMLHttpRequest对象,除了IE7以下的版本不支持(ActiveXObject)。
1 | //查看是否支持XMLHttpRequest对象 |
创建XHR对象
使用
new XMLHttpRequest();
创建一个XHR对象
实例
1 | <script> |
XHR请求方法
向后端发数据,主要使用
open()
和send()
方法:
open()
方法是定义发送的方法,地址等信息,
send()
主要是发送open()
定义的方法。
send()
前可以通过setRequestHeader()
设置HTTP头信息。
open()
主要是定义发送的方法
xmlhttp.open(method,url,async)
method
:表示发送到后端方法,主要有POST和GET
url
:表示发送到后端哪个URL上处理
async
:是否开启异步,如果true表示开启,如果false表示是同步,默认为true, 如果与后台交互,async必须为异步,如果是同步提交时会等待服务接受完了后才能进行下一步操作。
setRequestHeader(header,value)
定义发送的头信息,header规定头名称,value规定值。
send()
主要是发送刚才定义的方法
xmlhttp.send(string)
string
;用于POST请求,因为GET发送,数据都是在url后面。
实例
1 | <script> |
XHR响应方法
接受后端的数据,主要用到
responseText()
和responseXML()
属性
responseText
:属性用于获取字符串形式的响应数据
responseXML
:属性用于获取XML格式响应数据
onreadystatechange事件
假设我们send()
数据后,但是后台处理异常,没收到数据那么怎么去处理呢,是不是应该有个XHR对象的状态信息呢?
这里就用到onreadystatechange
事件。
onreadystatechange
事件就是当readyState
改变时,会触发的onreadystatechange
事件。
readState
属性就是XMLHttpRequest
状态信息.XMH状态属性除了
readState
还有个status
属性
onreadystatechange
事件名称,当readState
状态变化时,调用此函数
readState
状态有0~4种状态
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;
statue
属性:200表示正常,404表示页面没找到
实例:
1 | <script> |
Ajax跨域
游览器都有同源策略,XMLHttpRequest遵循这种策略,只允许本地发送本地的请求。
默认情况下不允许跨域,一旦出现跨域就提示Access-Control-Allow-Origin,主要是为了安全起见。
可以通过JSONP方式实现跨域。
JSONP只是一种方式,不是数据结构,JSONP默认是使用GET请求,如果POST请求返回也是GET请求
原理是利用
<script>
块,在其执行src属性为所需要跨的域,函数(返回值)
1 | <body> |
Ajax伪提交
补充HTML之iframe
iframe
元素会创建包含另一个文档的内联框架(行内框架)这里点击页面,不刷新全部页面,只刷新iframe内部定义的页面
1 | <body> |
Ajax上传文件
通过
FormData()
上传
1 |
|