博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax核心技术之XMLHttpRequest
阅读量:6281 次
发布时间:2019-06-22

本文共 2588 字,大约阅读时间需要 8 分钟。

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"));

转载地址:http://abxva.baihongyu.com/

你可能感兴趣的文章
ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
查看>>
<转>云主机配置OpenStack使用spice的方法
查看>>
java jvm GC 各个区内存参数设置
查看>>
[使用帮助] PHPCMS V9内容模块PC标签调用说明
查看>>
关于FreeBSD的CVSROOT的配置
查看>>
基于RBAC权限管理
查看>>
基于Internet的软件工程策略
查看>>
数学公式的英语读法
查看>>
留德十年
查看>>
迷人的卡耐基说话术
查看>>
PHP导出table为xls出现乱码解决方法
查看>>
PHP问题 —— 丢失SESSION
查看>>
Java中Object类的equals()和hashCode()方法深入解析
查看>>
数据库
查看>>
Vue------第二天(计算属性、侦听器、绑定Class、绑定Style)
查看>>
dojo.mixin(混合进)、dojo.extend、dojo.declare
查看>>
Python 数据类型
查看>>
iOS--环信集成并修改头像和昵称(需要自己的服务器)
查看>>
PHP版微信权限验证配置,音频文件下载,FFmpeg转码,上传OSS和删除转存服务器本地文件...
查看>>
教程前言 - 回归宣言
查看>>