《XMLHttpRequest对象-AJAX技术核心》

前端之家收集整理的这篇文章主要介绍了《XMLHttpRequest对象-AJAX技术核心》前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

最近一段时间学习关于AJAX教程,对于其印象最深的就是可以实现异步响应,通过视频学习,这种实现的核心力量在于XMLHttpRequest对象,下面跟着小编去看看吧,let we go!

详情

XHR即为XmlHttpRequest,又为可扩展超文本传输请求。分步解释为:Xml:可扩展标记语言,Http超文本传输协议,Request请求。用于在后台与服务器交换数据。

具体可提供的支持有:

@H_502_23@
  • 在不重新加载页面的情况下更新网页
  • 页面已加载后从服务器请求数据
  • 页面已加载后从服务器接收数据
  • 后台向服务器发送数据
  • 常用属性

    常用方法

    扩展:

    对于XmlHttpRequest有了一个基本的了解之后,现在来认识一下它的扩展,扩展主要有三方面的内容:浏览器缓存;中文乱码;跨域访问,主要讲述的是XmlHttpRequest在遇到这三方面问题时,它是如何进行机智解决的。

    1.浏览器缓存

    典型现象:更换图片,由于点击按钮,第二次会读缓存,所以图片不变,此时就是浏览器缓存问题

    解决方案:增加时间戳(保证后台和客户端交互,而并非访问缓存)如下代码仅彰显部分编写

    <html>
      <head>
         <title></title>
    	 <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	 <script>
    	    function change(){
    			var imgNode = document.getElementById("ving");
    			//imgNode.src = "GetImage";
    			imgNode.src = "GetImage?+=" + (new Date()).valueOf();//增加时间戳后的代码
    		}
    	 </script>
    	 >
      </head>
    </html>

    2.中文乱码

    保证页面端定义的charset和http响应头的Content-type中定义的charset一致即可

    IE6中XMLHttpRequest对象在页面端定义的charset和http响应头的Content-type中定义的charset都为GB2312时会出现中文乱码,其他浏览器没有这种现象

    解决方案:

    1.http响应头的Content-type中定义的charset为UTF-8

    2.服务器端和客户端的charset一样的编码方式,并且在创建XMLHttpRequest对象时,运用如下方式:

    var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];//此处为创建示范
    for (var i = 0;i < activexName.length;i++){
    	try{
    		xmlhttp = new ActiveXObject(activexName[i]);
    		break;
    	}catch(e){
    	
    	}
    }

    3.

    try{
    	String old = request.getParameter("name");
    	if (old == null){
    		out.printIn("用户名不能为空");
    	}else{
                  String name = URLDecoder.decode(old,"utf-8");//服务器端
    		system.out.printIn(name);
    		if (name.equals("wengxinkui")){
    			out.printIn("用户名[" + name + "]已经存在,请使用其他用户名");
    		}else{	
    		
    	}
    }
     
    

    var username = document.getElementById("UserName").value;//页面
    username = encodeURL(encodeURL(userName));

    两次encodeURL的工作原理:


    3.跨域访问

    解决方案:

    页面端:

    if(url.indexOf("http://")==0){
         url = url.replace("?","&");
         url = "Proxy?url=" + url;
    }

    服务器端:

    Get和Post方式分开处理:

    1.获取原始的请求URL地址和参数

    2.get方式利用URL和远程地址交互

    3.post方式利用URL和URLConnection和远程地址交互,还要向远程发送请求参数信息。


    总结:

    从思想上可能对于XMLRequest有所理解,然而在实现上还有所欠缺,后期继续努力。

    猜你在找的Ajax相关文章