用途
Web的传统模型。客户端向服务器发送一个请求,服务器返回整个页面,如此反复,每次请求都会导致刷新整个页面,用户体验很不好。随着技术的迭代更新,出现了一个名叫ajax(Asynchronous javascript and xml)的技术,一种不用刷新整个页面便可与服务器通讯的办法
在Ajax模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面,也就是说不会出现不必要的页面刷新。
还记得form吗?
使用form表单,我们也可以发送ajax请求,我们只需要简单配置一些参数即可, 我们不用手动去实现ajax请求。下面是form的几个相关的属性。
Method:GET POST等
action:请求地址
enctype: 规定在发送表单数据之前如何对其进行编码
application/x-www-form-urlencoded : 在发送前编码所有字符(默认)
multipart/form-data (): 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
但是在实际开发中我们很少用到form表单的ajax请求,因为它的可配置性不高,我们一般都是手动封装ajax,或者使用一些库(axios等),下面是原生ajax的一些简单介绍.
原生ajax
ajax对象
XMLHttpRequest和ActiveXObject,由于ie没有前者,所以在ie环境下,我们使用后者,为了实现兼容一般我们像下面这样写。
var xhr = null
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp')
}
ajax对象的一些方法
一般流程我们是调用open、调用send、配合使用onreadystatechange readyState status statusText responseText.如下
xhr.open(method,address, flag)
xhr.setRequestHeader(“label”, “value”)
xhr.send(data)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && statusText === 'ok') {
var response = xhr.responseText
}
}
如果想更详细的了解原生'ajax', 可参考以下链接ajax