Ajax相关面试知识点整理 – Web应用开发人员面试必备 - 高飞网
3人看过

Ajax相关面试知识点整理 – Web应用开发人员面试必备

2013-04-18 01:22:56

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 对象
XML

ajax乱码问题
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>
还没有评论!
54.158.248.167