AJAX实例教程:异步调用的程序

文章简介:Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。

Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。

XMLHttpRequest对象是Ajax的核心对象

不同的浏览器,建立对象的方式不同这里以IE为例
var request = new ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest对象的方法和属性:

open(request-type,url,asynch,username,password):建立到服务器的新请求。
request-type 发送请求的类型:get,post,head
url 要连接的url
asynch 可选参数,如使用异步连接为true,如使用同步连接为false,默认值为true
username 可选参数,如果需要身份验证,则可以在此指定用户名,无可选参数
password 可选参数,如果需要身份验证,则可以在此指定口令,无可选参数

send(content):向服务器发送请求。
content 要发送的内容

abort():退出当前请求。

readyState:提供当前 HTML 的就绪状态。
0:请求未初始化
1:请求已经建立,但是还没有发送(还没有调用 send())
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
3:请求在处理中,通常响应中已有部分数据可用了
4:响应已完成

status:提供当前HTML的状态码
401:未经授权
403:禁止访问
404:没找到访问页
200:正常

XMLHttpRequest对象的Head请求

取得Response的Header
request.getAllResponseHeaders();
request.getResponseHeader("Server");
request.getResponseHeader("Connection");
request.getResponseHeader("Date");
request.getResponseHeader("Content-Length");
request.getResponseHeader("Keep-Alive");
request.getResponseHeader("X-Cache");
request.getResponseHeader("Content-Type");

设置Request的Header
request.setRequest("Server") = "";
request.setRequest("Connection") = "";
request.setRequest("Date") = "";
request.setRequest("Content-Length") = "";
request.setRequest("Keep-Alive") = "";
request.setRequest("X-Cache") = "";
equest.setRequest("Content-Type") = "";

一、异步调用的程序示例

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象
function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //设置要发送的Url,发送的值为键值对

request.open("get",url,true); //调用open方法

request.onreadystatechange = showMessage; //设置服务器要回调的方法
request.send(null); //发送
}

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.responseText);
}
}
</script>
二、同步调用程序示例

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象

function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //设置要发送的Url,发送的值为键值对

request.open("get",url,false); //调用open方法

request.send(null); //发送

alert(request.responseText);

}

</script>
异步请求程序示例说明:程序首先建立了XMLHttpRequest对象,之后以异步的方法执行请求,onreadystatechange是在请求状态发生改变时,服务器要回调的客端方法,要在send()方法之前设置,在showMessage()方法里,当readState的状态为4且 status为200时,执行操作同步请求与异步请求的差别在于,同步请求时,客户端要行进等待,当服务器处理完请求后再在执行以下的程序,而异步请求不必如此,客户端的程序在请求发出之后就可以继续执行,而不必等待,直到服务器处理后,再回调用onreadystatechange注册的方法。

三、请求Head的程序示例

<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest对象

function sendRequest()
{
url = "http://www.webjx.com/web_design.asp"; //要发送的Url

request.open("head",url,true); //调用open方法

request.onreadystatechange = showMessage; //设置服务器要回调的方法
request.send(null); //发送
}

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getAllResponseHeaders()); //取得Header的值
}
}

</script> 这个方法与上一个方法的不同之处就在于open()方法的第一个参数是head,我们可以重写showMessage以取得相应的Head值

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getResponseHeader("Server"));
alert(request.getResponseHeader("Connection"));
alert(request.getResponseHeader("Date"));
alert(request.getResponseHeader("Content-Length"));
alert(request.getResponseHeader("Keep-Alive"));
alert(request.getResponseHeader("X-Cache"));
alert(request.getResponseHeader("Content-Type"));
}
} 四、发送XML数据

XMLHttpRequest对象可向服务器发送XML格式的数据,但这样做会降低程序的响应速度,因为与普通的文本相比,XML格式的数据,要处理更多额外的东西,建议没有必要的情况下,不要使用XML

发送XML数据的程序示例

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHttpRequest"); //建立XMLHttpRequest对象

function sendXmlRequest()
{
xml = ""; //XML数据

url = "http://www.webjx.com/web_design.asp"; //设置发送的Url

request.open("post",url,false); //调用open方法

request.setRequestHeader("Content-Type","text/xml"); //设置发送请求的头

request.send(xml);

//要执行的程序
}
</script>

时间: 2024-11-01 10:27:55

AJAX实例教程:异步调用的程序的相关文章

PHP中实现异步调用多线程程序代码

比如现在有一个场景,给1000个用户发送一封推荐邮件,用户输入或者导入邮件账号了提交服务器执行发送.  代码如下 复制代码 <?php $sqlserver/42852.htm target=_blank >count=count($emailarr); for($i=0;$i<$count;$i ) { sendmail(.....);//发送邮件 } ?> 这段代码用户体验极差,也无法实际运用,首先发送这么多邮件会产生服务器运行超时,其实漫长的用户等待时间会让用户对系统产品怀疑

jquery ajax实例教程与详细说明(1/2)

说明 $.ajax({ type: "post", url: "handler1.ashx", data: { username: "admin", password: "123" }, success: successhandle }); function successhandle(rep) { $("#msg").html(rep); } 详细讲一下关于jquery ajax实例 实例 通过 ajax

ajax完整入门教程+ajax实例教程

在一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮.然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 Java,也可能是 CGI 进程或者类似的东西),脚本执行完成后再发送回全新的页面.该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页面,或者是具有根据原来表单中输入数据选择的某些选项的页面.当然,在服务器上的脚本或程序处理和返回新表单时用户必须等待.屏幕变成一片空白,等到服务器返回数据后再重新绘制.这就是交互性差的原因,用户得

PHP and AJAX responseXML 实例教程

PHP and AJAX responseXML 实例教程 AJAX技术可以用来恢复的数据库信息为XML . AJAX的数据库为XML的例子 在AJAX以下例子,我们将演示如何网页上可以卖到信息从一个MySQL数据库,它转换为一个XML文档,并用它来显示信息在几个不同的地方. 这个例子我似乎很像" PHP的AJAX技术数据库"例如,在最后一章,但是有一个很大的不同:在这个例子中我们得到的数据从PHP的XML网页使用responseXML功能. 接收的响应作为XML文件使我们能够更新这个

请问:怎么样在ajax中异步调用页面并执行调用页里的JS

问题描述 众说周知 A页面使用AJAX的xmlHttp 异步调用另外一个页面B,是把B页的前端代码(包括HTML,CSS,JS等)是以字符串的形式存储在data里所以在A页面中显示的结果是HTML 但是JS等不体现也不执行请问 怎么样才能使 A页面调用B页面的似乎 也执行其中的JS代码呢? 解决方案 依照ext的做法,先提取返回值中的js代码(包括<script src>和<script></script>2种),针对<script src="**&qu

python3编写C/S网络程序实例教程_python

本文以实例形式讲述了python3编写C/S网络程序的实现方法.具体方法如下: 本文所述实例是根据wingIDE的提示编写的一个C/S小程序,具体代码如下: client端myclient.py代码如下: #!/bin/env python #-*- coding:gb18030 -*- # import socket import time i=1 while i<10: address=("127.0.0.1",3138) s=socket.socket(socket.AF_

Jquery ajax基础教程_jquery

jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的

jQuery中队列queue()函数的实例教程_jquery

如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置. 该函数属于jQuery对象(实例).如果需要移除并执行队列中的第一个函数,请使用dequeue()函数.你也可以使用clearQueue()函数清空指定的队列. 语法jQuery 1.2 新增该函数.queue()函数具有如下两种用法: 用法一: jQueryObject.queue( [ queueName ] [, newQueue ] ) 如果

ajax异步调用数据实例

ajax异步调用数据实例 通过ajax在客户端调用后台代码,通过后台代码更改,修复,查询数据,并把结果返回给客户端,在客户端获取到服务器返回的数据在做相应的操作,从而实现通过HTML控件操作一些在网页特效比较难实现的功能:比如通过HTML的控件访问查询数据库教程,并把结果传给客户端显示,这方面在google地图开发应用得比较多,下面以一个简单的实例说明: 添加一个.asp教程x的页面,命名为:ajaxPKashx.aspx,全部代码如下:  1 <%@ Page Language="C#&