Ajax核心XMLHttpRequest总结

Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。

    使用方法 
    XMLHttpRequest五步使用法:

代码如下:

1.创建对象;
    2.注册回调函数;
    3.使用open方法设置和服务器交互的基本信息;
    4.设置发送的数据,开始和服务器端交互;
    5.实现回调函数。

由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:

代码如下:

//使用封装方法人员只提供http的请求,url地址,数据,成功和失败的回调的方法
    //1.定义XMLHttpRequest对象的构造方法
    var MyXMLHttpRequest =function(){
    var xmlhttprequest;
    if(window.XMLHttpRequest){
    //IE7,IE8,FireFox,Mozillar,Safari,Opera
    //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");
    xmlhttprequest = new XMLHttpRequest();
    //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题
    if(xmlhttprequest.overrideMimeType){
    xmlhttprequest.overrideMimeType("text/xml");
    }
    }else if(window.ActiveXObject){
    //IE6,IE5.5,IE5
    alert("IE6,IE5.5,IE5");
    var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    for (var n=0;n

扩展问题

1.浏览器缓存
    2.中文乱码
    3.跨域访问

对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:

代码如下:

//解决缓存的转换:增加时间戳
    if(url.indexOf("?") >= 0 ){
    url = url + "&t=" + (new Date())。valueOf();
    } else {
    url = url + "?t=" + (new Date())。valueOf();
    }
    //解决跨域的问题
    if(url.indexOf("http://") >= 0) {
    url.replace("?","&");
    url = "Proxy?url=" + url;
    }

问题3对应代理服务端实现:

代码如下:

/**
    * Handles the HTTP GET method.
    *
    * @param request servlet request
    * @param response servlet response
    * @throws ServletException if a servlet-specific error occurs
    * @throws IOException if an I/O error occurs
    */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    //获取参数,最后得到请求url地址类似于:url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33
    StringBuilder url = new StringBuilder();
    url.append(request.getParameter("url"));
    //获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer
    Enumeration enu = request.getParameterNames();
    boolean flag = false;       //定义标志变量,表示是否为拼接的第一个参数
    while(enu.hasMoreElements()){
    String paramName = (String) enu.nextElement();
    if(!paramName.equals("url")){
    String paramValue = request.getParameter(paramName);
    paramValue = URLEncoder.encode(paramValue,"utf-8");
    if(!flag){
    url.append("?")。append(paramName)。append("=")。append(paramValue);
    flag = true;
    } else {
    url.append("&")。append(paramName)。append("=")。append(paramValue);
    }
    }
    }
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();
    if(url != null && url.length() > 0){
    URL connectionUrl = new URL(url.toString());
    BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));

以上就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • 详解XMLHttpRequest(一)同步请求和异步请求

    XMLHttpRequest 让发送一个HTTP请求变得非常容易.你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求.当传输完毕后,结果的HTTP状态以及返回的响应内容也可以从请求对象中获取. 通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式.请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的.如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步

  • XMLHttpRequest对象_Ajax异步请求重点(推荐)

    一.XMLHttpRequest对象 1.Ajax能够是实现异步传输,所依赖的就是JavaScript中的XMLHttpRequest 2.XMLHttpRequest对象是XMLHttp组件的对象,它是一个抽象对象,允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端 3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互,不必每次刷新页面 4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件

  • 浅谈jQuery异步对象(XMLHttpRequest)

    我们先来看看异步对象五部曲 这是post请求的. 复制代码 代码如下: //1.00创建异步对象             var xhr = new XMLHttpRequest();             //2.0             xhr.open("post", url,params, true);             //3.0将参数使用Formdata属性传递             xhr.setRequestHeader("Content-Type

  • AJax 学习笔记一(XMLHTTPRequest对象)

    现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了.今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来. 1.何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分

  • 如何用ajax来创建一个XMLHttpRequest对象

    我每次创建一个对象,都要这样复杂吗?如下代码: JScript code: "testAjax.htm" 文件: 复制代码 代码如下: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest();

  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHT

  • Ajax核心XMLHttpRequest总结

    Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换:JavaScript操作DOM实现动态效果:运用XHTML+CSS表达信息:XML和XSLT操作数据.此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换.     使用方法      XMLHttpRequest五步使用法: 复制代码 代码如下: 1.创

  • Ajax 核心框架函数及例子

    核心ajax(options)函数中,包含了建立xmlhttprequest,提取数据,判断是否回复成功等,基本满足了日常需求. 复制代码 代码如下: // A generic function for performming AJAX requests // It takes one argument, which is an object that contains a set of options // All of which are outline in the comments, b

  • 简单谈谈AJAX核心对象

    Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术.这项新技术能够极大地改善网站的用户体验. 什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写. Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求.Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一起,共同的协作中发挥各自的作用. Ajax的优点 1.减轻服务器的负担.Ajax的原则是"按需取数据"

  • Ajax核心XMLHTTP组件资料第1/2页

    一.数据库远程管理技术  基于互联网的广域网现代应用中的一个重要环节是数据库远程监控.首先简单回顾一下互联网上的数据库远程管理技术的发展过程和方式: (推荐文章:AJAX专题) 早期通过编写CGI-BIN程序模块进行数据库远程管理.但CGI-BIN的运行速度慢,维护很不方便,现在已经基本被弃用. 这几年使用组件对象模型(Component Object Model, COM)的应用非常多,效果也很好.但如果使用的是第三方服务器(笔者的网站就是建立在第三方的虚拟主机上),服务器方往往因为保密或其它

  • JQuery中Ajax的操作完整例子

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完

  • 在JavaScript的jQuery库中操作AJAX的方法讲解

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码.   前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进

  • Ajax技术组成与核心原理分析

    本文主要为大家分析了Ajax技术组成原理,供大家参考,具体内容如下 1.Ajax 特点:局部刷新.提高用户的体验度,数据从服务器商加载 2.AJax的技术组成 不是新技术,而是之前技术的整合 Ajax: Asynchronous Javascript And Xml;(异步的JavaScript和XML) 包括的技术:JavaScript.XML.CSS.XMLHttpRequest 异步:发送请求以后,不等结果,由回调函数处理. JavaScript:向服务器发送请求,获得返回结果,更新页面

  • ajax readyState的五种状态详解

    在<Pragmatic Ajax A Web 2.0 Primer >中对readyStae状态的介绍,摘译如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire res

  • Ajax实现城市二级联动(三)

    本文实例为大家分享了Ajax实现城市二级联动的具体代码,供大家参考,具体内容如下 这是Ajax实现城市二级联动系列文章第三篇,把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2.

随机推荐