`
bobbie.zou
  • 浏览: 65805 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

用XmlHttpRequest实现Ajax

    博客分类:
  • js
阅读更多
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的核心,它是JavaScript内置的一个对象,提供了与服务器进行异步通信的能力。本教程将深入讲解如何使用XMLHTTPRequest来实现自定义的Ajax请求,并探讨JavaScript的闭包模式。 首先,让...

    XMLHttpRequest Ajax 实现

    XMLHttpRequest Ajax xml http request

    ajax使用XMLHttpRequest实现简单的信息验证

    总的来说,XMLHttpRequest是实现Ajax通信的关键,它使得Web应用程序可以无刷新地与服务器进行交互,极大地提升了用户体验。在这个简单的信息验证场景中,我们学会了如何创建请求、发送数据、接收响应并处理结果。...

    Ajax-hook:拦截由XMLHttpRequest发出的浏览器的AJAX请求-js源码

    在源网页加载之前,实现一个XMLHttpRequest的代理对象,然后覆盖全局的XMLHttpRequest,这样一但上层调用 new XMLHttpRequest这样的代码时,其实创建的是Ajax-hook的代理对象实例

    一个简单的xmlHttpRequest ajax的例子

    在这个“一个简单的xmlHttpRequest AJAX的例子”中,我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先,我们需要创建一个新的XMLHttpRequest实例。在JavaScript中,这是通过`new XMLHttpRequest()...

    xmlHttpRequest用法示例ajax

    XMLHttpRequest(简称XHR)是JavaScript中的一个对象,用于在不刷新整个页面的情况下,与服务器进行异步数据交换,这是实现Ajax(Asynchronous JavaScript and XML)技术的基础。在本示例中,我们将深入探讨...

    Ajax简单实例 XMLHttpRequest

    总结来说,Ajax通过XMLHttpRequest对象实现了异步数据交换,提高了网页的交互性和用户体验。学习Ajax,首先要掌握创建XMLHttpRequest对象、设置请求、发送请求以及处理响应的基本步骤。通过不断实践和深入学习,你将...

    用XMLHttpRequest和struts实现AJAX(译)[转]

    "用XMLHttpRequest和Struts实现AJAX(译)[转]" 这个标题揭示了本文的主题,即如何结合XMLHttpRequest对象(一种在JavaScript中实现异步数据通信的技术)与Struts(一个Java Web开发框架)来创建基于AJAX...

    AJAX_XMLHttpRequest.rar_ajax java_ajax xmlhttpreque_opera

    Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX...

    AjaxXMLHttpRequest_Demo02.zip

    XMLHttpRequest(XHR)是实现Ajax的核心对象,它允许JavaScript与服务器进行通信,接收或发送数据,实现页面的动态更新。本Demo02着重展示了如何利用XMLHttpRequest对象实现Ajax的基本用法。 在AjaxXMLHttpRequest_...

    不使用XMLHttpRequest对象实现Ajax效果的方法小结

    本文实例讲述了不使用XMLHttpRequest对象实现Ajax效果的方法。分享给大家供大家参考,具体如下: 前言: 我以前接触Ajax的时候,只是用Jquery的api来实现Ajax效果,对其并没有细细研究,最近在学习Ajax的原理,会不...

    XMLHttpRequest实现的简单ajax登录

    Ajax using XMLHttpRequest and Struts

    Ajax技术的核心是XMLHttpRequest对象,它允许网页在不重新加载整个页面的情况下,与服务器进行数据交换,从而实现局部刷新,提升响应速度和交互性。 ### Ajax与XMLHttpRequest Ajax技术最早由Adaptive Path提出,...

    Ajax深度剖析,XMLHttpRequest对象大揭秘

    总的来说,XMLHttpRequest对象是实现Ajax技术的关键,它使得前端和后端可以更高效、更灵活地交互,极大地提升了Web应用的用户体验。理解并熟练掌握XMLHttpRequest的使用,对于任何前端开发者来说都至关重要。

    window.XMLHttpRequest详解(AJAX工作原理)1

    - **兼容性问题**:早期版本的Internet Explorer使用ActiveX对象实现`XMLHttpRequest`功能,这可能会导致跨浏览器兼容性问题。现代浏览器都支持基于标准的`XMLHttpRequest`实现。 - **安全性**:由于AJAX请求是在...

    全面剖析 Ajax XMLHttpRequest对象

    XMLHttpRequest对象是Ajax技术的核心,它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下,XMLHttpRequest允许开发者通过JavaScript动态更新网页内容,极大地提升了用户...

    Ajax之XMLHttpRequest详解

    XMLHttpRequest对象是实现Ajax功能的关键组件。它提供了一种在后台与服务器交换数据的方式,这意味着Web页面可以在不重新加载的情况下动态更新。这对于提升用户体验有着重要的意义。 - **基本作用**:...

    XMLHttpRequest中文参考手册(学习Ajax必备)

    XMLHttpRequest(XHR)是Web开发中的一个关键技术,它是实现Asynchronous JavaScript and XML(Ajax)的核心组件。Ajax是一种在不刷新整个网页的情况下,能够更新部分网页的技术,极大地提升了用户体验。本手册将...

    js ajax XMLHttpRequest的使用

    XMLHttpRequest(XHR)对象是实现AJAX的核心,它提供了异步通信的能力。这篇博客将深入探讨如何使用XMLHttpRequest进行AJAX请求。 首先,创建一个XMLHttpRequest实例是开始AJAX请求的第一步。在JavaScript中,你...

Global site tag (gtag.js) - Google Analytics