AJAX

最新推荐文章于 2024-06-20 09:53:57 发布

与天齐平

最新推荐文章于 2024-06-20 09:53:57 发布

阅读量101

点赞数 1

分类专栏：网络

本文链接：https://blog.csdn.net/qq_36927330/article/details/90578857

版权

网络专栏收录该内容

4 篇文章 0 订阅

订阅专栏

力学如力耕,勤惰尔自知

AJAX （一）

简介：AJAX是一种在无需加载网页的情况下，能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)

AJAX 是与服务器交换数据的艺术

传统的web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发送给浏览器，
ajax交互模型，浏览器首先将请求发送ajax引擎(以xmlHttpResquest为核心)，ajax在将请求发送给服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示。
1.同步交互模型：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作。
2.异步交互模型：客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待

AJAX工作原理

ajax工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎，用户操作起来也就感觉更加流畅了

前端代码实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

后台服务器代码

创建XMLHttpRequest对象

XMLHttpRequest是ajax的的基础。现带的大多是浏览器都支持XMLHttpRequest对象。XMLHttpRequest用于在后台与服务器交换数据。

向服务器发送请求

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

ajax发送请求的方式：

$.ajax({
url:"传给谁",
data:(参数),
type:"post/get",
dateType:"html/text/json",
success:function(data){
},
error:function(msg){
}
});

使用Ajax的优点：

增强的用户的体验
增强用户的生产力
减少带宽的使用并增加速度
支持异步处理
减少服务器请求和网络负载

与天齐平

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录