XMLHttpRequest对象五步使用法

更新时间:2023-05-23 10:07:03 阅读: 评论:0

XMLHttpRequest对象五步使用法
在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据。
XMLHttpRequest简介
XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和
XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的Web 应用程序架构的一项关键功能。
XMLHttpRequest和Javascript
Javascript本身并未具备向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面向服务器提交请求,要么使用XMLHttpRequest对象发送请求。不同的是,前者是普通的即同步交互模式,而后者是异步交互方式。
XMLHttpRequest提供了一系列的属性和方法,来向服务器发送异步的http请求;在服务器处理用户请求的过程中,XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态,并根据这些状态指示Javascript做相应的处理;当服务器顺利完成响应用户行为的动作、并将响应数据返回时,XMLHttpRequest提供的respon系列方法,可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned
byte数组的方式组装起来,提供给Javascript处理。
XMLHttpRequest的五步使用法:
1、建立XMLHttpRequest对象
2、注册回调函数
3、使用open方法社会自和服务器端交互的基本信息
4、设置发送的数据,开始和服务器端交互
5、在回调函数中判断交互是否结束,响应是否正确,并根据需要过去服务器端返回的数据,更新页面内容
下面我们以用户名确认来实现XMLHttpRequest的五步使用法:
<!DOCTYPE html>
<html>
<head>
advantages<title></title>
<meta http-equiv="Content-Type" content="text/html; chart=UTF-8">
<script type="text/javascript">
var xmlhttp;
function submit(){
//1.创建XHLHttpRequest对象
if(window.XMLHttpRequest){
//alert("IE7,IE8 ,FireFox。Mozillar、Safari,Opera"); //IE7,IE8 ,FireFox。Mozillar、Safari,Opera
前面的英文
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}el if(window.ActiveXObject){
//IE6,IE6.5 IE5
the coma
alert("IE6,IE6.5 IE5");
var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0','lhttp.3.0','MSXML2.XMLHTTP.2.0',
'MSXML2.XMLHTTP.1.0'];
for(var i=0; i<activexName.length;i++){
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
if(xmlhttp==undefined||xmlhttp==null){
alert("当前浏览器不支持穿件XMLHttpRequest对象,请更换浏览器");
return;
}
//alert(xmlhttp);
//2.注册回调方法
adystatechange=callback;
//错误的写法callback();
//记忆一个固定用法,获取文本框中用户输入的内容
var
ElementById("UrName").value;
/*
//GET方式交互
//设置和服务器端交互的相应参数
xmlhttp.open("GET","AjaxServer?name="+urName,true);
//4.设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.nd(null);
*/
choo a urname什么意思
//POST方式交互
//3.设置和服务器端交互的相应参数
xmlhttp.open("POST","AjaxServer",true);
//POST方式交互所需要增加的代码
汽车节能xmlhttp.tRequestHeader("Content-Type","application/x-www-form-u rlencoded");
//4.设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.nd("name="+urName);
}
function callback(){
//5.判断和服务器端的交互是否完成,还有判断服务器端是否正确返回了数据
adyState==4){
//表示和服务器端的交互已经完成
//服务器返回的http状态码
fsh//200表示“成功”,404表示“未找到”。500表示“服务器内容部错误”
//alert(xmlhttp.status);
if(xmlhttp.status==200){
//表示服务器端的响应代码是200,正确的返回了数据
//纯文本数据的接受方法
var sponText;
//XML数据对应的DOM对象的接受方法
//使用前提是,服务器端需要设置content-type为text/xml
//var sponXML;
alert("bb");
//记忆想div标签填充文本内容的方法
var ElementById("message");
div.innerHTML=message;
}
(参考:/doc/5017216672.html,) }
}
</script>
</head>
<body>
很快英语
<input type="text" id="UrName"/>
<input type="button" value="校验用户名" onclick="submit()"/>
<br/>
<div id="message"></div>
</body>
</html>aboveall
XMLHttpRequest的详细属性和方法
方法和属性
描述rad
Open(String method,String url,Boolean ansynch,String urname,String password)指定和服务器端交互的HTTP方法,URL地址及其他请求信息。
零基础英语在线学习其中method表示HTTP请求方法。支持所有HTTP的方法,一般使用“GET”,“POST”url表示请求的服务器的地址
Asynch表示是否采取异步方式,true表示异步,fal表示同步
后两个参数可以不指定,usrename和password分别表示用户名和密码,提供http认证机制需要的用户名和密码
Send(content)

本文发布于:2023-05-23 10:07:03,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/119428.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:服务器端   交互   请求   数据   对象
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图