一.什么是ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。2005年被提出
Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。
Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。
通过在后台与服务器进⾏少量数据交换,Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下,对⽹⻚的某部分进⾏更新。
传统的⽹⻚(不使⽤ Ajax)如果需要更新内容,必须重载整个⽹⻚⻚⾯。
二.ajax工作原理
具体来说,AJAX 包括以下几个步骤。
-
创建 XMLHttpRequest 实例
-
发出 HTTP 请求
-
接收服务器传回的数据
-
更新网页数据
概括起来,就是一句话,AJAX 通过原生的XMLHttpRequest
对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,XML 格式已经过时了,但是 AJAX 这个名字已经成了一个通用名词,字面含义已经消失了。
XMLHttpRequest
对象是 AJAX 的主要接口,用于浏览器与服务器之间的通信。尽管名字里面有XML
和Http
,它实际上可以使用多种协议(比如file
或ftp
),发送任何格式的数据(包括字符串和二进制)。
XMLHttpRequest
本身是一个构造函数,可以使用new
命令生成实例。它没有任何参数。一旦新建实例,就可以使用open()方法发出 HTTP 请求。然后,指定回调函数,监听通信状态(readyState属性)的变化。上面代码中,一旦XMLHttpRequest实例的状态发生变化,就会调用监听函数handleStateChange一旦拿到服务器返回的数据,AJAX 不会刷新整个网页,而是只更新网页里面的相关部分,从而不打断用户正在做的事情。
注意:AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错。
例如:我们创建实例来使用ajax的过程如下:
(1)通过上述代码生成XMLHttpRequest实例
1.var xhr = new XMLHttpRequest();
(2)向服务器发送请求
1.xhr.open(method, url, async, username, password); 2.send(string);//post请求时才使用字符串参数,否则不用带参数。
open() 方法包含 5 个参数,说明如下:
-
method:HTTP 请求方法,必须参数,值包括 POST、GET 和 HEAD,大小写不敏感。
-
url:请求的 URL 字符串,必须参数,大部分浏览器仅支持同源请求。
-
async:指定请求是否为异步方式,默认为 true。如果为 false,当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。
-
username:可选参数,如果服务器需要验证,该参数指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
-
password:可选参数,验证信息中的密码部分,如果用户名为空,则该值将被忽略。
注意:post请求一定要设置请求头的格式内容,见下面:
1.xhr.open("POST","test.html",true); 2.xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 3.xhr.send("fname=Henry&lname=Ford"); //post请求参数放在send里面,即请求体
(3)服务器响应处理(区分同步跟异步两种情况)
发送请求后,可以使用 XMLHttpRequest 对象的 responseBody、responseStream、responseText 或 responseXML 属等待接收响应数据。
其中,responseText 获得字符串形式的响应数据。responseXML 获得XML 形式的响应数据。、
a.同步时候:
1.document.getElementById("myDiv").innerHTML = xhr.responseText; //获取数据直接显示在页面上
b.异步时候:
相对来说比较复杂,要在请求状态改变事件中处理。
xhr.onreadystatechange=function() { if (xhr.readyState==4 &&xhr.status==200) { document.getElementById("myDiv").innerHTML=xhr.responseText; } }
这里介绍一下,XMLHttpRequest的实例属性readyState,它返回一个整数,表示实例对象的当前状态。该属性只读。它可能返回以下值。
0-(未初始化)还没有调用send()方法
1-(载入)已调用send()方法,正在发送请求
2-(载入完成)send()方法执行完成,已经接收到全部响应内容
3-(交互)正在解析响应内容
4-(完成)响应内容解析完成,可以在客户端调用了
三.拓展
(1)XMLHttpRequest 的常用的实例属性
a---readyState:返回当前实例的状态。
通信过程中,每当实例对象发生状态变化,它的readyState
属性的值就会改变。这个值每一次变化,都会触发readyStateChange
事件。
b---onreadystatechange:readystatechange事件发生时(实例的readyState属性变化),就会执行这个属性。
c---response:属性表示服务器返回的数据体(即 HTTP 回应的 body 部分)。它可能是任何数据类型,比如字符串、对象、二进制对象等等,具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。
如果本次请求没有成功或者数据不完整,该属性等于null
。但是,如果responseType
属性等于text
或空字符串,在请求没有结束之前(readyState
等于3的阶段),response
属性包含服务器已经返回的部分数据。
d.responseType:属性是一个字符串,表示服务器返回数据的类型。这个属性是可写的,可以在调用open()
方法之后、调用send()
方法之前,设置这个属性的值,告诉服务器返回指定类型的数据。如果responseType
设为空字符串,就等同于默认值text
。
e---responseText:属性返回从服务器接收到的字符串,该属性为只读。只有 HTTP 请求完成接收以后,该属性才会包含完整的数据。类似的还有responseXML、 responseURL。
f----status:属性返回一个整数,表示服务器回应的 HTTP 状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为0
。该属性只读。
g---statusText:属性返回一个字符串,表示服务器发送的状态提示。不同于status
属性,该属性包含整个状态信息,比如“OK”和“Not Found”。
h---timeout:属性返回一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0,就表示没有时间限制。
ontimeout:
属性用于设置一个监听函数,如果发生 timeout 事件,就会执行这个监听函数。
i---withCredentials
:
属性是一个布尔值,表示跨域请求时,用户信息(比如 Cookie 和认证的 HTTP 头信息)是否会包含在请求之中,默认为false.
同源的请求不需要设置这个属性。
属性的事件监听:
XMLHttpRequest 对象可以对以下事件指定监听函数。
(3)XMLHttpRequest 的实例的常用方法
a.XMLHttpRequest.open()
方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。
四.JQuery实现
$就是jQuery的别称,而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options))
这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素, 函数作用之一就是GetElementByID的代替,但()内不仅可以是ID,还可以是各类选择器
比如:$(document)就是 选取整个文档对象。
JS版的Ajax仅做为了解,我们重点学习jQuery版的Ajax,jQuery是⼀个优秀的js框架,⾃然对JS原⽣的Ajax进⾏了封装,封装后的Ajax的操作⽅法更简洁,功能更强⼤,这也是程序员最普遍使⽤,语法结构简单,代码可读性好。与Ajax操作相关的jQuery方法经常使⽤的有三种。
标签:HTTP,请求,认识,Ajax,实例,XMLHttpRequest,属性 From: https://www.cnblogs.com/131362wsc/p/17358919.html