注册 | 登陆
您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

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

  稿源:本站整理   2018-09-05   点击:   撤稿纠错
Ajax(Asynchronous JavaScript and XML),使用户在使用Web程序时,不用在来来回回的Post了,可以近乎实时的从客户端收到服务器返回的信息,而无需刷新,极大的非富了用户的操作体验。

下面是AJAX实例教程:异步调用的程序的相关内容,文章教程主要讲述与AJAX 异步 相关的一些技术与知识,更多的内容欢迎大家访问http://www.alixixi.com,获取更多最新教程,下面是教程讲解:

文章简介: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>


关于AJAX实例教程:异步调用的程序的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/a/2018090581377.shtml方便下次再访问哦。


更多关于 AJAX 异步 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示