java ajax原理,优劣点,解决乱码
java 中运用 ajax原理,优劣点,解决乱码还有DWR
java 中运用 ajax原理,优劣点,解决乱码还有DWR
答案:ajax原理,优劣点
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写
Ajax 尝试建立桌面应用程序的功能和交互性,
与不断更新的 Web 应用程序之间的桥梁。
不需要刷新页面就可以将请求提交到后台,
用户根本感觉不到页面在发送请求或是交换数据.
Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序。
下面是 Ajax 应用程序所用到的基本技术:
HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
DHTML 或 Dynamic HTML,用于动态更新表单。
我们将使用div、span和其他动态 HTML 元素来标记 HTML。
文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XMLXMLHttpRequest 对象
XMLajax乱码问题
javascript是使用UTF-8国际编码,即每个汉字用4个字节来存储,
但是这就造成了用AJAX来send数据的时候出现乱码。
Ajax乱码产生主要有2个原因
1. xmlhttp 返回的数据默认的字符编码是utf-8,
如果前台页面是gb2312或者其它编码数据就会产生乱码
2. post方法提交数据默认的字符编码是utf-8,
如果后台是gb2312或其他编码数据就会产生乱码推荐方法,前台后台都用utf-8编码
客户端、服务器端全部采用Utf-8编码,
且url发送中文字采用escape编码,unescape解码。
而且效率高,而且符合目前的形式,utf-8编码本身就是一种比较优秀的编码。解决的办法就是在送出的流里面加一个HEADER,
指明送出的是什么编码流,这样XMLHTTP就不会乱搞了。
JSP:response.setHeader("Charset","GB2312");
可以在调用ajax之前,先把数据通过javascript写到cookie里,
然后再send就可以将cookie里的数据发送出去了
XMLHttpRequest 对象
1. 创建新的 XMLHttpRequest 对象
var xmlHttp = new XMLHttpRequest();
2. 用 JavaScript 代码捕获和设置字段值
var phone = document.getElementById("phone").value;
3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
1. 从 Web 表单中获取需要的数据。
2. 建立要连接的 URL。
3. 打开到服务器的连接。
4. 设置服务器在完成后要运行的函数。
5. 发送请求。
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
dwr
DWR可以让JavaScript调用运行在Web服务器里面的JAVA程序
jsp:
<script type="text/javascript" src="<%=path%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>
<script type='text/javascript' src="<%=path%>/dwr/interface/service.js"></script><input type="text" id="organid" value="70000000"><input type="button" onclick="GetSub()" value="查询"/>
function GetSub1() {
//dwr.util.removeAllOptions('demo1');
service.GetSubOrgan3($("organ").value, Display1);
}
function Display1(data) {
//dwr.util.removeAllOptions("demo1");
if (data != null) {
dwr.util.removeAllOptions("organ1");
//dwr.util.addOptions("organ",{A:"A", B:"B"});
dwr.util.addOptions("organ1", data);
//dwr.util.addOptions("demo1", dwr.util.toDescriptiveString(data, 2));
}
}
java 后台
public Map GetSubOrgan3(String strOrganid) {
Map mapRnt = new HashMap();
mapRnt.put("51006100", "宝安区");
mapRnt.put("51006200", "福田区");
return mapRnt;
}web.xml
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>dwr.xml
<dwr>
<allow>
<create creator="new" javascript="service">
<param name="class" value="helloWorld.Service"/>
</create>
</allow>
</dwr>