Ajax与使用Ajax时产生的乱码问题—URL编码

（一）Ajax

一、Ajax详解

在学习HTTP协议的时候，我们知道，HTTP协议基于请求响应模型，一次请求对应一次响应，请求只能由客户端发出，服务器只能被动的等待请求。
但我们经常见到如下的功能：
1. 网络聊天室里，聊天信息，不需要刷新页面就可以接受最新的聊天消息。
2. 网站注册时，输入用户名后无需提交立即提示用户名已经存在。
3. 百度输入搜索条件时，根据输入的不同提示不同的备选查询内容。
在这些应用场景中，我们没有刷新网页，却获取到了服务器发回的最新数据。这不是很明显的违反了HTTP协议了吗？
1. 其实这不是违反了HTTP协议，而是使用了一种“另类”的技术，叫做AJAX（Asynchronous JavaScript and XML）。改变了传统方式的同步刷新方式，改为了异步刷新—即在保持当前页面的情况下，异步发出请求等待响应，再根据得到的响应消息修改当前页面。
Ajax并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
XMLHttpRequest对象方法
XMLHttpRequest对象属性

JS方法实现Ajax：

//1 创建XMLHttpRequest对象function ajaxFunction(){var xmlHttp;try{ // Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e){}}}return xmlHttp;}//2.服务器端向客户端进行响应(注册监听)var data = null;var xhr = ajaxFunction();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200||xhr.status==304){data = xhr.responseText;}}}readyState 属性表示Ajax请求的当前状态。它的值用数字代表。0 代表未初始化。 还没有调用 open 方法1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用2 代表已加载完毕。send 已被调用。请求已经开始3 代表交互中。服务器正在发送响应4 代表完成。响应发送完毕xhr.status常用状态码及其含义：404 没找到页面(not found)403 禁止访问(forbidden)500 内部服务器出错(internal service error)200 一切正常(ok)304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )xhr.responseText 服务器发回的响应结果,字符串xhr.responseXML 服务器返回的响应结果,XML对象//3 客户端与服务器端建立连接* 使用的是XMLHttpRequest对象的open(method, url, asynch)方法*  * method：请求类型，类似 “GET”或”POST”的字符串。*  * url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。*  * asynch：表示请求是否要异步传输，默认值为true(异步)。xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true);//4 客户端向服务器端发送请求* * 使用的是XMLHttpRequest对象的send()方法*  * 如果请求类型是GET方式的话，使用send()方法发送请求数据，服务器端接收不到*  * 该步骤不能被省略，只能写成xhr.send(null);*/xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");~GET方式：xhr.send(null);     //xhr.send(null);~POST方式：如果请求类型是POST的话，需要设置请求首部信息xhr.send("a=7&b=8");

JQuery方式实现Ajax

JQuery详解：http://blog.csdn.net/chou_out_man/article/details/78585875

$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );}
});$.get("test.php?name=John&location=Boston", function(data){alert("Data Loaded: " + data);
});$.post("test.php",{"name":"John","location":"Boston"}, function(data){alert("Data Loaded: " + data);
})

（二）使用Ajax时产生的乱码问题—URL编码

一、详解

浏览器与服务器之间是通过Http协议通信的，但是Http协议只支持ISO-8859-1编码，所以理论上来说， Http协议只能处理ISO-8859-1码表中具有的字符，不能处理中文
URL编码—解决Http协议携带中文的问题
1. 通过URL编码，客户端将非ISO-8859-1编码的字符转换为URL编码格式发送给服务器，服务器收到之后在进行URL解码，就可以得到正确的字符了。

URL编码过程：

对于ISO-8859-1中有的字符不作处理，原样输出
对于ISO-8859-1中没有的字符，先按照制定码表将字符转换为字节
```
中    111100001110101010101100
国    110101011011010100110001
```

再将每个字节转换为16进制表示的方式

中    11110000 -> f011101010 -> ea10101100 -> ac
国    11010101 -> d510110101 -> b500110001 -> 31

再在每一个之前加上% ，就得到了 URL编码格式

中    11110000 -> %f011101010 -> %ea10101100 -> %ac
国    11010101 -> %d510110101 -> %b500110001 -> %31
中国 ->%F0%EA%AC%D5%B5%31

一般情况下，浏览器和服务器会自动进行URL编码和解码，并不需要程序员手动进行编解码。

但是在一些特别的场景下，例如：AJAX发送数据时，浏览器不再自动帮我们编码，需要我们手动进行URL编解码操作

java中进行URL编解码：URLEncoder.encoder(str , encode);//编码URLDecoder.decode(str , encode);//解码
jq中进行URL编解码：$.param(myObject);

大数据WEB阶段（十一）Ajax、URL编码相关推荐

大数据WEB阶段 TransientDateAccessResourceException
大数据WEB阶段 TransientDateAccessResourceException 一 . 分析如果数据库保存的字段有时间 , 但是没有给该字段赋值时 ,则该字段默认是0000-00-00 ...
大数据WEB阶段总结
一.概述 HTTP协议 web容器 - Tomcat 静态web资源 - 本质上是文件 html css js 图片音频视频 flash- 动态web资源 - 本质上是程序 Servelt JSP ...
大数据WEB阶段（九）Servlet+Request
Servlet与Request 一.概述 Servlet 是sun公司提供的一门用于开发动态web资源的技术按照这套规范写出来的servlet可以放置在web应用中在servlet容器中运行 . 开 ...
大数据WEB阶段（六）MySql详解（一）
MySql(二) 一.概述什么是数据库数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简而言之就是存储数据的仓库. 数据库的分类层次式数据库.网络式数据库.关系型数据库数 ...
大数据WEB阶段（十）Response、ServletConfig、ServletContext、资源跳转三种方式
Response.ServletConfig.ServletContext.资源跳转三种方式 - (一)Response 一.Response概述在doGet和doPost方法的参数中,HttpSe ...
大数据WEB阶段Maven安装配置与使用
Maven 零.目录 Maven简介 Maven 的安装与配置创建Maven工程创建maven-web工程搭建私服使用本地资源库阿里私服 maven命令上传本地工程到私服中 maven-w ...
大数据WEB阶段（十五）JavaEE三大核心技术之过滤器
Filter过滤器一.Filter 过滤器概述 Filter是JavaEE三大核心技术(Servlet . Filter . Listener)之一 FIlter作用是拦截对资源的访问 , 拦截下来 ...
大数据WEB阶段（十三）JSP（二）JSP标签、EL表达式、JSTL
JSP标签.EL表达式.JSTL (一)JSP标签技术一.JSP标签技术概述 jsp本质上是一种动态web资源开发技术 , 看起来像是html , 但其中可以写java代码 , 非常方便用来开发动态 ...
大数据WEB阶段（十三）JSP（一）JSP基础、JSP指令详解、四大域九大隐式对象总结
JSP基础.指令.四大作用域九大隐式对象总结 (一)JSP基础一.JSP概述 jsp其实是java动态页面技术 HTML可以用来组织页面但是HTML是一种静态web资源技术无法嵌入动态数据. Ser ...

大数据WEB阶段（十一）Ajax、URL编码

Ajax与使用Ajax时产生的乱码问题—URL编码

（一）Ajax

一、Ajax详解

（二）使用Ajax时产生的乱码问题—URL编码

一、详解

大数据WEB阶段（十一）Ajax、URL编码相关推荐

最新文章

热门文章