Ajax使用小结

Ajax跨域问题

最近写的后台管理页面中多个模块都有一个分页功能，请求某一页的数据时用Ajax来实现，大致代码如下

 

$.ajax({
　　url : url,
　　type : "GET",
　　success : function(data) {
　　var result = eval('(' + data + ')');
　　if (0 == result.errno) {

　　　　......

　　}

　　开始的时候是在本地测试，写的url大致如下

 var url = "http://xxx.net/question.phpmethod=pagequery&page=1&size=10";

调试的时候请求都正常完成，客户端就是接受不到数据，用chrome调试的时候才发现 Access-Control-Allow-Origin 问题，原来这里涉及到跨域请求，而且这个跨域请求没有被通过。于是我在服务器的返回的响应中设置了header，添加如下代码

echo header("Access-Control-Allow-Origin: *")，浏览器就能正常接受到响应的json串了。这里很麻烦的一点是，针对url请求的每一个方法，都需要在响应中添加header头部，而且将Access-Control-Allow-Origin的值设为*的话，就表示可以接受来自任意source origin的请求，存在很大的安全风险。

　　后来就在思考写的代码为什么跨域了，在网上查了下资料，跨域实现的过程大致如下：从http://www.a.com/a.html发起一个跨域请求，请求的地址是 http://www.b.com/b.php，如果服务器b返回一个header 

Access-Control-Allow-Origin: http://www.a.com，那么，这个来自http://www.a.com/a.html的跨域请求就会被通过。

　　当我本地调试的时候，访问远程服务器时，也属于2个不同的域。为了避免这种跨域请求，我将WEB放到服务器后，修改url为

"/question.phpmethod=pagequery&page=1&size=10"，就不存在跨域问题了，每个方法的响应中也不需要设置响应头了。

Ajax提交表单数据

　　在一个form表单中有多个字段时，甚至里面有很多隐藏字段时，当我们点击submit按钮后，浏览器会将form中的字段以name value的形式组装在请求体中发送到服务器进行处理，这是传统的表单提交方式。现在需要以异步的方式提交表单中的数据，当使用JQUERY中S.ajax或者$.post方法时，都需要自己组装数据传入方法中发送到服务器，这里面有较大工作量，想到自己组装一个form就头大，而且form表单的值多了，难免会遗漏或者出问题。后来找了下资料，发现一个很好的jquery函数，ajaxSubmit方法，这个方法大致介绍如下：

ajaxSubmit（）

马上由AJAX来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

$('#fadd').ajaxSubmit({
　　url : src,
　　type : 'POST',
　　success : function(result){
　　　　var data = eval("("+result+")");
　　　　if (data.errno == 0) {

　　　　　　......
　　　　}

这样就可以将ID为fadd的表单以ajax方式提交，提交时表单里面的数据也会如传统的submit一样由浏览器自动组装在请求体中了。

与ajaxSubmit对应的一个方法是ajaxForm方法，该方法意思是为AJAX提交表单做好准备，但它不提交表单。它接受的参数和ajaxSubmit一样。

小结

　　使用ajax的异步给WEB展示带来很多好的体验，以前用的时候都是使用传统的Javascript中的XMLHTTPRequest对象，使用中需要写较多的代码，后来用JQUERY或者QWRAP中ajax，带来了很多的便利，也不需要担心ajax在浏览器中的兼容问题。在ajax使用中，有时会碰到跨域和安全方面的问题，这个需要在以后的学习工作中注意。

　　在使用ajax中第二个疑惑就是QWRAP中的异步机制，如loadJs loadJsonp，查看源码的时候发现和loadcss差不多的机制，请求一个script脚本，然后在根据请求后的进行处理，这里有一点就是不会用回调函数，貌似这个callback要发送到服务端然后由服务端在返回响应的时候带回来以找到要调用的回调函数。这次本来打算是用loadJsonp来异步发请求获取JSON，还是由于自己对函数内在机制明白的不透彻，使用时有点问题，有时间后在研究下里面的实现机理与应用。

 

转载于:https://www.cnblogs.com/sigal/archive/2012/05/30/2527144.html