文章目录
1.AJAX是什么
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
- 创建XMLHttpRequest对象,也就是创建一个异步调⽤用对象
- 创建⼀一个新的HTTP请求,并指定该HTTP请求的⽅方法,URL及验证信息
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求.
- 获取异步调⽤用返回的数据
- 使⽤用JavaScript和DOM实现局部刷新
注意:光理论是不够的,在此送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处免费获取,小白勿进哦
AJAX是基于现有的Internet标准,并且联合使用它们:
-
XMLHttpRequest 对象 (异步的与服务器交换数据)
-
JavaScript/DOM (信息显示/交互)
-
CSS (给数据定义样式)
-
XML (作为转换数据的格式)
AJAX应用程序与浏览器和平台无关的!
优点
-
不需要插件的⽀持,原⽣ js 就可以使⽤
-
⽤户体验好(不需要刷新⻚⾯就可以更新数据)
-
减轻服务端和带宽的负担
缺点:
- ajax不不⽀支持浏览器器back按钮。
- 安全问题 AJAX暴暴露露了了与服务器交互的细节。
- 对搜索引擎的⽀支持⽐比较弱。
- 破坏了了程序的异常机制。
五个步骤
1.创建对象
2.初始化请求
3.设置http头信息
4.指定回调函数
5.发送请求
var xhr =null;//创建对象
if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} xhr.open(“方式”,”地址”,”标志位”);//初始化请求
xhr.setRequestHeader(“”,””);//设置http头信息
xhr.onreadystatechange =function(){}//指定回调函数
xhr.send();//发送请求
2.创建XMLHttpRequest对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//创建爱你XMLHttpRequest对象
function createXMLHttpRequest(){
var xhr=null;
if (window.ActiveXOBject){//IE浏览器创建方式
xhr=new ActiveXOBject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非ie浏览器或IE7以上版本
xhr=new XMLHttpRequest();
}
if(!(xhr)){//异常,创建对对象失败
window.alert("创建XMLHttpRequest异常");
}
return xhr;
}
</script>
</head>
<body>
</body>
</html>
3.向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
第一个open方法其实是配置ajax必要的信息,第二个send才是真正的发起请求到服务器
- xmlhttp.open(“GET”,“ajax_info.txt”,true);
- xmlhttp.send();
同步or异步?
false同步執行,程序会暂停在那儿等待结果返回
true异步执行,不阻碍后续代码的执行
同步:阻塞的 -张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两个人一块去吃饭 =浏览器向服务器请求数据,服务器⽐较忙,浏览器一直等着(⻚面白屏),直到服务器返回数据,浏览器才能显示页面
异步:⾮阻塞的 -张三叫李四去吃饭,李四在忙,张三说了一声然后自己就去吃饭了,李四忙完后自己去吃 =浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回 数据的时候通知浏览器一声,浏览器把返回的数据再渲染到⻚面,局部更新
这样就会导致浏览器出现假死状态,影响界面的加载。所以这个属性基本上不推荐使用了,为了解决这个问题,现代浏览器都是通过Promise Api来进行操作。
get or post?
GET:⼀般⽤用于信息获取,使⽤用URL传递参数,对url地址的长度有限制,对所发送信息的数量量也有限制,⼀般在2000个字符,有 的浏览器器是8000个字符
请求的参数都暴露在url地址中,如果传递中文参数需要自己进行编码操作,安全性比较低
POST:⼀般⽤用于提交数据,没有数据长度的限制,对所发送的信息没有限制,提交的数据内容都存在于http请求体中,数据不会暴露在url地址中
在以下情况中,请使用 POST 请求:
- ⽆法使用缓存⽂件(更新服务器上的⽂件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输⼊时,POST 比 GET 更稳定也更可靠
一个简单的 GET 请求:
xmlhttp.open("GET","请求地址",true);
xmlhttp.send();
加粗样式一个简单 POST 请求:
xmlhttp.open("POST","请求地址",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定希望发送的数据
4.服务器响应
如需获得来自服务器的响应使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
如果来自服务器的响应并非 XML,使用 responseText 属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,使用 responseXML 属性
请求 cd_catalog.xml 文件,并解析响应:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
5.onreadystatechange 事件
- 当请求被发送到服务器时,我们需要执行一些基于响应的任务。
- 每当 readyState 改变时,就会触发 onreadystatechange 事件。
- readyState 属性存有 XMLHttpRequest 的状态信息。
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果你的网站上存在多个 AJAX 任务,那么应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
注意:最后送大家2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,点击此处免费获取,小白勿进哦