XmlHttp是什么?
最通用的定义为:XmlHttp是一套可以在JavaScript、Vbscript、Jscript等脚本语言中通过http协议传送或接收数据的一套API。
来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。
XmlHttp对象参考:
属性
readyState用来记录当前请求的状态,只读。
0(未初始化) 对象已创建,但是尚未初始化(尚未调用open方法)
1(初始化) 对象已初始化(调用了open方法),尚未调用send方法
2(发送数据) send方法已调用,但是当前的状态及http头未知
3(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
当
readyState发生改变时,调用
onreadystatechange方法,
onreadystatechange需要自己定义。
status长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
responseText 将响应信息作为字符串返回.只读
responseXML 将响应信息格式化为Xml Document对象并返回,只读
方法
abort 取消当前请求
XMLHttpRequest.abort();
open 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码)
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数
bstrMethod http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl 请求的URL地址,可以为绝对地址也可以为相对地址。
varAsync[可选] 布尔型,指定此请求是否为异步方式,默认为true。
bstrUser[可选] 如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
bstrPassword[可选] 验证信息中的密码部分,如果用户名为空,则此值将被忽略。
调用open方法后,会将readyState修改为1。
setRequestHeader 单独指定请求的某个http头
XMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
参数
bstrHeader 字符串,头名称(可以是自定义key)。
bstrValue 字符串,值。
send 发送请求到http服务器并接收回应
XMLHttpRequest.send(varBody);
参数
varBody 欲通过此请求发送的数据。
调用send方法后,会先调用
onreadystatechange方法,此时readyState状态为1,然后会已经进程将readyState修改为2、3、4
一般情况下,使用Ajax提交或者获取参数可以采用GET、POST方式,使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。
例如 :
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send();
此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如:
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。
下面举个完整的例子:
客户端js:
function xmlHttpAjax(url,para,async){
var xmlHttpReq;
if(window.XMLHttpRequest){
xmlHttpReq=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttpReq=new ActiveXObject("MSXML2.XMLHTTP.3.0");
}else{
alert('Javascript not enabled or MSXML not available');
}
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
responseText=xmlHttpReq.responseText;
}else{
alert('status:'+xmlHttpReq.status);
}
}
};
xmlHttpReq.open('POST',url,async);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpReq.send(para);
/*
* xmlHttpReq.open('GET',url,async);
* xmlHttpReq.send();
*/
}
jsp:
<%@ page language="java" import="java.text.*, java.io.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String reqdata=request.getParameter("reqdata");
out.print(reqdata);
%>
分享到:
相关推荐
使用XMLHTTPRequest实现自定义ajax。javascript闭包模式写法。值的学习
XMLHttpRequest Ajax xml http request
NULL 博文链接:https://tydldd.iteye.com/blog/1725526
在源网页加载之前,实现一个XMLHttpRequest的代理对象,然后覆盖全局的XMLHttpRequest,这样一但上层调用 new XMLHttpRequest这样的代码时,其实创建的是Ajax-hook的代理对象实例
包括使用XMLHttpRequest实现Ajax的示例,jQuery实现Ajax的示例
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX...
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX...
本文实例讲述了不使用XMLHttpRequest对象实现Ajax效果的方法。分享给大家供大家参考,具体如下: 前言: 我以前接触Ajax的时候,只是用Jquery的api来实现Ajax效果,对其并没有细细研究,最近在学习Ajax的原理,会不...
由于只能在IE中使用,所以大多数开发人员都没有用XMLHttpRequest,直到最近,Mozilla 1.0和Safari 1.2把它采用为事实上的标准,情况才有改观。需要重点说明的是,XMLHttpRequest并不是一个W3C标准,不过许多功能已经...
ajax-proxy是一个用ES6中代理特性实现的用于代理原生对象XMLHttpRequest的库,它可以使您从对XMLHttpRequest进行操作。 使用 安装 CDN约会 < script > ...
XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。 向后台请求数据readyState有五个状态0:服务器未初始化,1:服务器连接已建立,2请求已接受收,3请求...
本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...
使用java,jsp,mysql实现Ajax分页。可以观察到ajax按需获取数据,异步交互的过程。这个代码可以直接引用到其他需要分页的地方。booklist.jsp是前台显示页面,getbooks.jsp是后台与数据库操作页面,creathttp.js是...
博文链接:https://lengue.iteye.com/blog/163349
介绍了XMLHttpRequest对象的基本知识
简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对...