前几天学了些Ajax,感觉不是很好理解,我感觉实际用到的时候才能更好地理解,现在先用写博客的方法给自己捋一下思路~
加油~💜💜💜💜
目录
一、初识Ajax
1.1.什么是Ajax
AJAX :等同于异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.2.Ajax的优点
- 不需要插件的⽀持,原⽣ js 就可以使⽤
- 减轻了服务器的负担
- 无须刷新整个页面,局部刷新
- 让用户的体验更好
1.3.同步请求
- 默认是true
- 浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
- 同步是指一个线程要等待上一个线程执行完才能开始执行,
- 同步可以看做是一个单线程操作,只要客户端请求了,在服务器没有反馈信息之前是一个线程阻塞状态。
1.4.异步请求
- false
- 浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。
- 异步是一个线程在执行中,下一个线程不必等待它执行完就可以开始执行。
- 异步是个多线程。在客户端请求时,可以执行其他线程,并且在把这个线程存放在他的队列里面,有序的执行。
- 异步的效率要高于同步。如果数据在线程间共享,那么必须使用同步
1.5.Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作和服务器响应异步化
步骤:
- 创建XMLHttpRequest对象,即创建一个异步调用对象.
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
- 设置响应HTTP请求状态变化的函数.
- 发送HTTP请求.
- 获取异步调用返回的数据.
- 使用JavaScript和DOM实现局部刷新.
function ajaxHttpRequestFunc(){
let xmlHttpRequest; // 创建XMLHttpRequest对象,即一个用于保存异步调用对象的变量
if(window.ActiveXObject){
// IE浏览器的创建方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
// Netscape浏览器中的创建方式
xmlHttpRequest = new XMLHttpRequest();
}
xmlHttpRequest.onreadystatechange=function(){
// 设置响应http请求状态变化的事件
console.log('请求过程', xmlHttpRequest.readyState);
if(xmlHttpRequest.readyState == 4){
// 判断异步调用是否成功,若成功开始局部更新数据
console.log('状态码为', xmlHttpRequest.status);
if(xmlHttpRequest.status == 200) {
console.log('异步调用返回的数据为:', xmlHttpRequest .responseText);
document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText;
// 局部刷新数据到页面
} else {
// 如果异步调用未成功,弹出警告框,并显示错误状态码
alert("error:HTTP状态码为:"+xmlHttpRequest.status);
}
}
}
xmlHttpRequest.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true);
// 创建http请求,并指定请求得方法(get)、url以及验证信息
xmlHttpRequest.send(null); // 发送请求
}
二、实现Ajax的基本步骤
2.1.AJAX - 创建 XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
// 在IE浏览器中创建XMLHttpRequest对象
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
// 在Netscape浏览器中创建XMLHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:
//定义一个变量,用于存放XMLHttpRequest对象
var xmlhttp;
//创建XMLHttpRequest对象的方法
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.2.AJAX - 向服务器发送请求
在WEB开发中,请求有两种形式,一个是get,一个是post,如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
- open()方法
-
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
var url = "http://xxxxx";
xmlHttp.open("POST", url, true);
- send()方法
-
将请求发送到服务器。
- string:仅用于 POST 请求
2.3.Post请求和get请求
区别:
- GET请求在URL中传送的参数是有长度限制的,而POST没有。
- GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。而POST数据不会显示在URL中。是放在Request body中。
- 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
- GET请求参数会被完整保留在浏览器历史记录里;相反,POST请求参数也不会被浏览器保留。
- GET请求只能进行url编码(application/x-www-form-urlencoded),而POST支持多种编码方式。
- GET请求会被浏览器主动缓存,而POST不会,除非手动设置。
- GET在浏览器回退时是无害的,而POST会再次提交请求
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
2.4.AJAX - 服务器 响应
获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
- responseText: 获得字符串形式的响应数据。
- responseXML: 获得 XML 形式的响应数据
2.5.AJAX - onreadystatechange 事件(三种)
- onreadystatechange 属性
求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件
xmlHttp.onreadystatechange = function() {
//我们需要在这写一些代码
}
- readyState 属性
用来监听 ajax 对象的 readyState 值改变的的行为,只要 readyState 的值发生变化了,那么就会触发该事件
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
readyState可能会出现的值:
状态 | 描述 |
---|---|
0 | 请求未初始化(在调用 open() 之前) |
1 | 请求已提出(调用 send() 之前) |
2 | 请求已发送(这里通常可以从响应得到内容头部) |
3 | 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) |
4 | 请求已完成(可以访问服务器响应并使用它) |
- responseText 属性
通过 responseText 属性来取回由服务器返回的数据
```javascript
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
2.5.设置获取服务器返回数据的语句
- 如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
- 但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功
- 因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200
//设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
xmlHttpRequest.onreadystatechange = getData;
//定义函数
function getData(){
//判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){//设置获取数据的语句
document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
//docunment.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
}
}
}
2.6.发送请求
发送HTTP请求可以使用XMLHttpRequest对象的send()方法
// 设置发送请求的内容和发送报送。然后发送请求
XMLHttpRequest.send(data);
三、一个完整的Ajax实例
var xmlHttpRequest; //定义一个变量用于存放XMLHttpRequest对象
//定义一个用于创建XMLHttpRequest对象的函数
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
//IE浏览器的创建方式
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
{
//Netscape浏览器中的创建方式
xmlHttpRequest = new XMLHttpRequest();
}
}
//响应HTTP请求状态变化的函数
function httpStateChange()
{
//判断异步调用是否完成
if(xmlHttpRequest.readyState == 4)
{
//判断异步调用是否成功,如果成功开始局部更新数据
if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
{
//查找节点
var node = document.getElementById("myDIv");
//更新数据
node.firstChild.nodeValue = xmlHttpRequest .responseText;
}else
{
//如果异步调用未成功,弹出警告框,并显示出错信息
alert("异步调用出错/n返回的HTTP状态码为:"+xmlHttpRequest.status + "/n返回的 HTTP状态信息为:" + xmlHttpRequest.statusText);
}
}
}
//异步调用服务器段数据
function getData(name,value)
{
//创建XMLHttpRequest对象
createXMLHttpRequest();
if(xmlHttpRequest!=null)
{
//创建HTTP请求
xmlHttpRequest.open("get","ajax.text",true)
//设置HTTP请求状态变化的函数
xmlHttpRequest.onreadystatechange = httpStateChange;
//发送请求
xmlHttpRequest.send(null);
}
}
有需要补充的会再加的!💜💜💜
~~