深圳网站设计制作欣赏

将想法与焦点和您一起共享

深圳网站建设设计 深圳网站优化排名 深圳网站设计制作欣赏

AJAX如何工作

2016-03-30  阅读: 深圳网站建设设计

AJAX如何工作

在传统的JavaScript代码,如果你想从数据库或服务器上的文件中获取的任何信息,或发送用户信息到服务器,你将不得不做出一个HTML表单和GET或POST数据到服务器。用户必须单击“提交”按钮发送/获取信息,等待服务器响应,然后新的一页,将负载与结果。
因为服务器返回一个新的页面,每次用户提交输入,传统的Web应用程序可以运行缓慢,往往不太友好。使用AJAX,JavaScript直接与服务器进行通信,通过JavaScript的XMLHttpRequest对象。
通过一个HTTP请求,页面可以请求,从服务器获得响应,无需重新加载页面。用户会停留在相同的页面上,他或她不会注意到脚本请求页面,或者在后台发送数据至服务器。
这张照片是一个简单的介绍了Ajax的工作原理:

AJAX如何工作

用户发送一个请求,执行一个动作和动作的反应显示为一层,通过身份识别,无需重新加载整个页面。比如用这个ID层:
< / DIV >
在接下来的步骤中我们将看到如何创建一个XMLHttpRequest和从服务器接收响应。
 
1。创建XMLHttpRequest
不同的浏览器使用不同的方法来创建XMLHttpRequest对象。Internet Explorer使用ActiveX对象,而其他的浏览器使用内置的JavaScript的XMLHttpRequest对象。
创建这个对象,并处理不同的浏览器,我们将使用一个“抓住”的声明。
功能ajaxfunction()
{
VaR技术;
试用
{
/ / Firefox,Opera 8 +,Safari
XMLHTTP =新xmlhttprequest();
}
赶上(E)
{
/ / Internet Explorer
试用
{
XMLHTTP =新的ActiveX对象(“MSXML2. XMLHTTP”);
}
赶上(E)
{
试用
{
XMLHTTP =新的ActiveX对象(“微软。XMLHTTP”);
}
赶上(E)
{
警报(“您的浏览器不支持Ajax!“);
返回false;
}
}
}
 
2。发送请求到服务器
送一个请求给服务器,我们使用open()法和send()方法。
方法以三个参数的open()。第一个参数定义了发送请求时使用的方法(GET或POST)。第二个参数指定服务器端脚本的URL。第三个参数指定异步处理的请求。的send()方法发送请求到服务器。
XMLHTTP。打开(“得到”,“asp”,真的);
XMLHTTP发送(空);
 
3。编写服务器端脚本
responseText将存储从服务器返回的数据。在这里,我们要返回当前时间。在“时间的代码。ASP”看起来像这样:
< %
响应。到期= - 1
写(时间)的反应。
%>
 
4。消费的响应
现在我们需要消耗响应接收并显示给用户。
XMLHTTP onreadystatechange = function()。
{
如果(XMLHTTP。发生= 4)
{
以下是我参考网上的文档。。时间。值= xmlHttp.responseText;
}
}
XMLHTTP。打开(“得到”,“asp”,真的);
XMLHTTP发送(空);
}
 
5。完整的代码
现在我们必须决定什么时候应该执行Ajax功能。我们将让函数运行的“幕后”当用户名文本字段的用户类型的东西。完整的代码看起来像这样:

<鱼>
<脚本type=“text/javascript”>
功能ajaxfunction()
{
VaR技术;
试用
{
/ / Firefox,Opera 8 +,Safari
XMLHTTP =新xmlhttprequest();
}
赶上(E)
{
/ / Internet Explorer
试用
{
XMLHTTP =新的ActiveX对象(“MSXML2. XMLHTTP”);
}
赶上(E)
{
试用
{
XMLHTTP =新的ActiveX对象(“微软。XMLHTTP”);
}
赶上(E)
{
警报(“您的浏览器不支持Ajax!“);
返回false;
}
}
}
XMLHTTP onreadystatechange = function()。
{
如果(XMLHTTP。发生= 4)
{
以下是我参考网上的文档。。时间。值= xmlHttp.responseText;
}
}
XMLHTTP。打开(“得到”,“asp”,真的);
XMLHTTP发送(空);
}
< /脚本>
<表名称=“以下是我参考网上“>
名称:<输入类型为“文本”
onkeyup =“ajaxfunction();”name=“用户名”/>
时间:<输入类型“文本”name=“时间”/>
<形式>
<体>
< / HTML >

牧羊人设计文章推荐:

2015年中小企业搜索引擎优化最终目标及建议

酒馆内部色彩突出设计

酸奶实验室网页设计欣赏

葡萄酒网站网页设计欣赏

将文章分享到..