Ajax常见问题整理

 jquery里的缓存问题如何解决？AJAX面试题

如果直接用jQuery里的$.ajax()方法的话，去除缓存很简单，只需要配置一下缓存属性cache为false，但如果想要简单写法getJSON()，去除缓存就不能通过配置来解决了。因为getJSON根本没有这个缓存属性让你来配置。因为如果其调用的地址URL和之前的一样的话，回调函数会直接在缓存里面读取数据，而不是进后台调用相应的方法。
解决方法就是让他的每次请求的URL地址不一样就行，但是同时又要不影响请求的服务所需要的数据，那么可以有一下几种方法：
1、$.getJSON(“URL?t=”+new Date(),function(json){});就是原有的URL基础上加一个时间变量，每次的请求地址就不一样了。
2、$.getJSON(“URL?rand=”+Math.random,function(json){});就是原有的URL基础上加上一个随机变量，不过这个方法有风险，万一随机数一样。。。。。。
3、第三种方法就是自己定义一个递增变量，在URL后面加上这个递增变量，每次请求完后，就递增一下。
$.get()去除缓存的方法和$.getJSON()相同。

 Ajax获取页面被缓存的解决方法?

1、//加一个随机数//////////////////////////////
var number = Math.random();
number = number * 1000000000;
number = Math.ceil(number);
var url=’get_book.aspx?book_num=’+book_num+
‘&ranum=’+number
或 var timespan=(new Date()).getTime;
var url=’get_book.aspx?book_num=’+book_num+
‘& timespan =’+ datetime

Ajax跨域问题解决方案?

使用中间层过渡的方式：
　 中间过渡，很明显，就是在AJAX与不同域的服务器进行通讯的中间加一层过渡，这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言，由中间层向不同域的服务器进行读取数据的操作。拿PHP做一个例子，如果需要对不同域的某一个php进行通讯，现在客户端的xmlhttprequest先query本域的一个PHP，然后由本域的这个PHP去和不同域的PHP进行通讯，然后由本域的PHP输出response；

2、使用＜script＞标签
　　这个方法是利用＜script＞标签中的src来query一个PHP获得response，因为＜script＞标签的src属性不存在跨域的问题。
　eg:＜script LANGUAGE=”Javascript” src=”" id=”get”＞ ＜/script＞ ＜script LANGUAGE=”Javascript”＞ ＜!– function get(url) { var obj = document.getElementById(“get”); obj.src = url; (obj.readStatus == 200) { alert(param); } } function query() { get(get.php); } //–＞ ＜/script＞

jQuery Ajax中文乱码问题?

$.ajax({ 　　　 dataType : ‘json’ 　　　 ,type : ‘POST’ 　　　 ,url : ‘http://localhost/test/test.do’ 　　　 ,data : {id: 1, type: ‘商品’} 　　　 ,success : function(data){ 　　　　　　　 　　　 } } );
问题:
　　提交后后台action程序时,取到的type是乱码
　　解决方法:
　　方法一:提交前采用encodeURI两次编码,记住一定是两次
　　1.修改以下代码
　　data:{id:1, type:encodeURI(encodeURI(‘商品’))}2.在后台action里要对取得的字符串进行decode
1String type = request.getParameter(“type”); 2type = URLDecoder.decode(type, “UTF-8″);

方法二:ajax配置contentType属性,加上charset=UTF-8
　　在ajax方法中加入以下参数
　　contentType: “application/x-www-form-urlencoded; charset=UTF-8″使用其它js框架或者xhr都是差不多,设置header中contentType即可,
　　这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的.

方法二在action里不需要进行decode,所以推荐使用此方法

ajax是什么及其工作原理？

jax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将
笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
AJAX最核心的一个对象是XMLHttpRequest，所有的Ajax操作都离不开对这个对象的
操作XMLHttpRequest对象相关方法:
打开请求
XMLHttpRequest.open(传递方式,地址,是否异步请求)
准备就绪执行
XMLHttpRequest.onreadystatechange
获取执行结果
XMLHttpRequest.responseText

列举Window对象的属性

closed 窗口是否关闭
defaultStatus 窗口状态栏的默认文本
status 窗口状态栏文本
document Document对象
history History对象
name Window对象的名称
parent 父窗口
self 返回当前窗口的引用
top 最顶层窗口

Ajax请求总共有多少种Callback?

Ajax请求总共有八种Callback onSuccess onFailure onUninitialized onLoading onLoaded onInteractive onComplete onException

介绍一下XMLHttpRequest对象？

通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面
的局部更新。 AJAX开始流行始于Google在2005年使用的”Google Suggest”。 “Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口： 当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务
器，然后服务器返回一个建议列表。 XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+
和NetScapt7 开始被支持。

介绍一下XMLHttpRequest对象的常用方法和属性

open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式
可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found

如何开发安全的AJAX应用

AJAX技术已经是现在最流行的Web应用开发技术了，但是与此同时，Web应用也成了这个IT架构中安全最薄弱，最容易受到攻击的部分，AJAX应用相比较与传统的Web应用，大大增加了客户端与服务器之间的交互，同时也使得一些后台的业务逻辑接口暴露给了客户端，如果服务器端没有足够的保护或者没有对客户端请求进行合法性校验，攻击者就会趁虚而入，进入系统内部进行破坏。开发人员如何才能在开发工程中保证AJAX应用的安全呢？ 一下是我搜集资料总结出来的一些checklist和best practices，希望对大家有所帮助。

1. 输入校验，这一部分已经在我的上一篇blog 如何进行Web应用的安全测试和输入校验 中进行了说明，进行输入校验有两种方式，一种是Blacklisting: 就是列出所有非法的输入进行屏蔽；另外一种是Whitelisting: 就是列出合法的输入格式，只要不属于这种格式都划为非法格式进行屏蔽。安全方面来说，Whitelisting比Blacklisting有更高的安全性。

2. 尽量避免动态的生成和执行code, 在javascript中尽量避免使用eval函数。

3. 在使用json对象之前对它进行校验，因为json对象也是javascript的一部分，所以json对象里面也有可能包含有有害的代码，所以在使用之前要对json进行校验，以保证json对象是安全的，校验的方法可以使用正则表达式进行也可以使用一个json parser进行转换，然后再使用。

4. 在引用不可信的内容的时候尽量使用iframe的方式。

5. 不要一刀切的使用AJAX, AJAX的作用是提高应用的交互性，所以之需要在交互性比较强的地方才使用ajax, 其他如之需要展示信息的地方使用传统的方式安全性更高。

6. 尽量使交互的网络传输量最小，ajax频繁的交互不但对应用性能有影响，对安全也是很大的隐患，所以要尽可能在最需要的地方使用ajax, 不要用ajax执行大的局部刷新操作

7. 最后可以使用一些ajax的安全检查工具进行检查。

如何用JQuery进行表单验证？

可以使用jQuery的插件–jQuery-validate表单验证插件来进行表单验证

例子：

$(“#form”).validate({
//验证规则
rules:{
author:{
required:true,//必需非空字段
minlength:2     //长度至少两字节
},
email:{
required:true,
email:true     //此字段为邮件地址
},
url:{
required:false,
url:true    //此字段为网址
},
content:{
required:true,
minlength:4
}
},
//错误消息
messages:{
author: {
required: ‘用户名必须填写’,
minlength:  jQuery.format(“名称至少{0}两个字节”)
},
email: {
required: ‘邮箱必须填写,做为联系方式’,
email: ‘邮箱格式不正确’
},
content: {
required: ‘网址必须填写’,
minlength: jQuery.format(“名称至少{0}两个字节”)
}
},
submitHandler: function(form) {
//ajax提交表单,需要jQuery.Form插件
$(form).ajaxSubmit({
dataType:’json’,
success:function(res){
if(res.success){
$(‘.ajaxsubmit’).html(‘发表成功!’).addClass(‘ok’);
$(‘textarea’).val(”);
$(‘#comments’).prepend(res.msg);
}else
$(‘.ajaxsubmit’).html(res.msg).addClass(‘fail’);
}
});
return false;
},
errorPlacement:function(error, element) {
//放置错误提示消息的Element
error.appendTo(element.parent().find(‘b’));
},
errorClass:’fail’,//错误消息样式
highlight: function(element, errorClass) {
//黄褪显示错误字段,需要jQuery.Highlight插件
$(element).highlightFade({color:’yellow’,speed:1000,iterator:’exponential’})
}
});