什么是Ajax？（这篇看完，你就会彻底懂了）

最新推荐文章于 2021-02-25 16:05:40 发布

Rapper_cl

最新推荐文章于 2021-02-25 16:05:40 发布

阅读量441

点赞数

分类专栏： Ajax 文章标签： Ajax 工作流程 AJAX详解

本文链接：https://blog.csdn.net/m0_37510446/article/details/90020455

版权

Ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相信做Java web开发的，会经常要用到Ajax，但是很多和我一样对Ajax不是很了解，那么接下来我们就一起好好来看看Ajax这个可恶的东西到底是什么吧！
首先AJAX=Asynchronous JavaScript and XML
翻译就是，异步的JavaScript和XML。
和前面的JSON一样，AJAX并不是一个新的编程语言，而是一种使用现有标准的新方法。
其最大亮点：在不重新加载整个页面的情况下，可以与服务器交换数据，并只更新部分网页。
比如我们校验用户名的时候，就会使用AJAX，只需要更新用户名数据就可以了，其他数据项无需加载，这样就很省时省力。
来看看下面这个实例，可以了解ajax是如何工作的，
/第一步创建XMLHttpRequest对象/
/第二步。设置监听方法/
/第三步创建请求，请求方式，请求地址，是否异步/
/第四步向服务器端发送请求/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<h1>通过这个简单例子。了解到ajax的工作流程</h1>
<script>
/*定义一个ajax方法*/
function loadXMLDoc(){
/*第一步创建XMLHttpRequest对象*/
var xmlhttp;
if(window.XMLHttpRequest)
{
/*IE7+，Chrome,Opera,Safari和Firefox浏览器的执行代码*/
xmlhttp=new XMLHttpRequest();
}
else {
/*IE6,IE5浏览器执行代码，当然现在很少人使用IE6和IE5了，所以这个可以写，也可以不写，写出来就是为了让大家了解一下*/
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*第二步。设置监听方法*/
xmlhttp.onreadystatechange=function(){
/*readyState==4代表数据接收完毕，此时可以通过responseBody或responseText获取完整的响应数据，status==200代表服务器已成功处理了请求*/
if (xmlhttp.readyState == 4 && xmlhttp.status==200)
{/*responseText 是服务器响应的数据*/
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
/*第三步创建请求，请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
/*第四步向服务器端发送请求，这里详解一下：send（）方法，只有在请求方式为post时，才可以有string数据，send（string）*/
xmlhttp.send();
}
</script>
</head>
<body>
<div  id="test"><h3>使用AJAX修改文本内容</h3></div>
<button type="button" onclick="loadXMLDoc()">修改文本内容</button>
<p><a href="/try/ajax/ajax_info.txt" target="_blank">ajax_info</a></p>
</body>
</html>

建议将该段代码在菜鸟教程的在线编译器进行编译，因为我需要服务器数据，所以这里的数据，采用的是菜鸟教程的服务器端数据
为了加强大家对于AJAX流程的掌握，接下来，看下面这个例子，采用Ajax+JSON的方法，将服务器端获取的数据转换为JavaScript对象，对比上面一个例子，做起来就很简单了：
（注意请求地址变了，这次的请求文件是一个JSON数据）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<h1>通过这个简单例子。了解到ajax的工作流程</h1>
<script>
/*定义一个ajax方法*/
function loadXMLDoc(){
/*第一步创建XMLHttpRequest对象*/
var xmlhttp;
if(window.XMLHttpRequest)
{
/*IE7+，Chrome,Opera,Safari和Firefox浏览器的执行代码*/
xmlhttp=new XMLHttpRequest();
}
else {
/*IE6,IE5浏览器执行代码，当然现在很少人使用IE6和IE5了，所以这个可以写，也可以不写，写出来就是为了让大家了解一下*/
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*第二步。设置监听方法*/
xmlhttp.onreadystatechange=function(){
/*readyState==4代表数据接收完毕，此时可以通过responseBody或responseText获取完整的响应数据，status==200代表服务器已成功处理了请求*/
if (xmlhttp.readyState == 4 && xmlhttp.status==200)
{/*responseText 是服务器响应的数据*/
obj=JSON.parse(xmlhttp.responseText);
document.getElementById("test").innerHTML=obj.name;
}
}
/*创建请求，请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/json_demo.txt",true);
/*向服务器端发送数据*/
xmlhttp.send();
}
</script>
</head>
<body>
<div  id="test"><h3>使用AJAX+JSON将服务器端数据获取并转换为JavaScript对象</h3></div>
<button type="button" onclick="loadXMLDoc()">获取转换的对象结果</button>
<p><a href="/try/ajax/json_demo.txt" target="_blank">ajax_info</a></p>
</body>
</html>

好了，以上就是AJAX工作的基本流程了

Rapper_cl

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
什么是Ajax？（这篇看完，你就会彻底懂了）

相信做Java web开发的，会经常要用到Ajax，但是很多和我一样对Ajax不是很了解，那么接下来我们就一起好好来看看Ajax这个可恶的东西到底是什么吧！首先AJAX=Asynchronous JavaScript and XML翻译就是，异步的JavaScript和XML。和前面的JSON一样，AJAX并不是一个新的编程语言，而是一种使用现有标准的新方法。其最大亮点：在不重新加载整个页...
复制链接

扫一扫

专栏目录