jQuery框架问题：ajax与web服务器通信

0 前言

1. ==load事件发生，必须是客户端与web服务器间的通信。== 不能通过文件系统访问ajax。

2. XHR对象——>使用jQuery简化使用

3. 最简单的ajax使用(只涉及到下载HTML文档)：

<script>$(document).ready(function() {  $('#newslinks a').click(function() {     var url=$(this).attr('href'); //获取操作对象     $('#headlines').load(url + ' #newsItem');//绑定load事件     return false;  //拒绝常规刷新  }); //end click});  // end ready</script>

1. 最简单的get传输数据(向服务器上传数据)

<script>$(document).ready(function() {    $('#login').submit(function(){//表单数据传输        var formData=$(this).serialize();//数据序列化为查询字符串        $.get('login.php',formData,processData);//使用get方法传输        function processData(data){            if(data=='pass'){                $('#content').html('<p>You have successfully logged in!</p>');            }else{                if($('#fail').length==0){                $('#formwrapper').prepend('<p id="fail">incorrect login information.Please try again</p>')                }            }        }        return false;    }); }); // end ready</script>

1. 最简单的json数据解析(从服务器下载json数据)

<script>$.getJSON(ajaxURL,function(data) {//获取json对象数据    $('h1').text(data.title);    $.each(data.items,function(i,photo) {//逐个访问复杂json数据的每一项        var photoHTML = '<span class="image">';        photoHTML += '<a href="' + photo.link + '">';        photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a></span>';        $('#photos').append(photoHTML);    //添加局部网页数据    }); // end each}); // end get JSON</script>

1. jsonp不同于json，作为跨域方案解决之一。
   由于ajax仅限于从同一域请求信息，但是一种叫做jsonp的替代方法允许我们通过从另一个站点请求一个JavaScript文件，从而获取json数据。==此方法仅对于get方法请求有用==
   ==跨域其他解决方案：使用代理服务器、使用HTML5提供的XHR2对象来解决(IE10以下不支持)==

1 jQuery提供的异步函数 : $.load(),get(),post(),getjson(),ajax()

==load事件发生，必须是客户端与web服务器间的通信。==
不能通过文件系统访问ajax。
XHR对象——>使用jQuery简化使用

1. 最简单的ajax使用:load()(只涉及到下载HTML文档)：
   
   • $.load()方法能够载入远程html文件代码并插入到DOM中，默认使用get方式，如果上传参数，则采用post方式。相对于ajax()的下载html文件功能的单一化。
   • 它可以快速在页面加载一个页面的html。

     $('#headlines').load(url + ' #newsItem');//绑定load事件

1. $.get()不只是下载静态页面
   
   • 向服务器提交请求下载数据。

<script>$(document).ready(function() {    $('#login').submit(function(){//表单数据传输        var formData=$(this).serialize();//数据序列化为查询字符串        $.get('login.php',formData,processData);//使用get方法传输        function processData(data){            if(data=='pass'){                $('#content').html('<p>You have successfully logged in!</p>');            }else{                if($('#fail').length==0){                $('#formwrapper').prepend('<p id="fail">incorrect login information.Please try again</p>')                }            }        }        return false;    }); }); // end ready</script>

1. .getJSON()=.get()方法+自动跨域
   
   • 优点：有返回值，可直接跨域
   • 缺点：数据量小
   • 提交方式：仅get(无$.postJSON)

<script>$.getJSON(ajaxURL,function(data) {//获取json对象数据    $('h1').text(data.title);    $.each(data.items,function(i,photo) {//逐个访问复杂json数据的每一项        var photoHTML = '<span class="image">';        photoHTML += '<a href="' + photo.link + '">';        photoHTML += '<img src="' + photo.media.m.replace('_m','_s') + '"></a></span>';        $('#photos').append(photoHTML);    //添加局部网页数据    }); // end each}); // end get JSON</script>

1. $.post()向服务器插入数据

   • post()函数使用post方式给服务器发送数据。
   • 一般用于CRUD中的新增操作。
   • ==但是它不能使用jsonp方式进行跨域请求==

2. $.ajax()更底层的定制请求
   虽然get()和post()函数非常简洁易用，但是对于更加复杂的一些设计需求还是无法实现，比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更加具体的函数：ajax()

二、$.post()也要跨域提交数据怎么办

==前提是自己的主机没有被人入侵，也就是自己的主机是安全的。==

1. 跨域问题的产生原因
   浏览器出于安全的考量(避免恶意网站轻易读取其他网站显示的内容，因为该内容可能含有敏感信息，想象iframe嵌套银行页面)==原则上允许跨域写而限制了跨域读。==
   跨域写是可以发送请求，跨域读是限制接收数据Response。
2. 跨域可能考虑的情况：
   
   • 指向外部域名的link和通过表单的向外部域发起get请求是一样的，也都是允许的，点击那一刻起，浏览器的当前域名转向了目标网站，也就完全是域内写、读了。
   • 通过表单向外部域发起post请求也是允许的，理由同上，源网站无法读取目标网站的任何内容。
   • AJAX（借助XMLHttpRequest对象）跨域get/post是禁止的，因为使用AJAX就是为了读取响应的内容，这触碰了跨域读的限制。
   • JSONP属于跨域读，且形式限制为get请求，而且仅仅跨域读js脚本。因为它利用了script标签的特性。
     虽然jsonp很好用，但是它注定是get请求，get请求有语义要求(幂等)、长度限制(为了兼容限制255字节)、安全隐患(容易受到csrf攻击，csrf解决必须是post请求配合token使用)。
     (浏览器认为跨域读脚本是例外，类似的还有img、iframe等等，注意它们共有的src属性）。
   • 因此对于浏览器而言:1和2没有跨域，3遵循了现在跨域读的原则，4属于允许的例外。

解决方案如下：
3. CORS策略
* HTML5的cors策略(跨域资源共享)，在php脚本中写一个header(“Access-Control-Allow-Origin:*”);
post前会产生一次options嗅探(称之为preflight，但简单请求不会出现)来确认是否有跨域请求的权限；客户端post时会带上Origin头指示来源网站，服务器端响应时带上Access-Control-Allow-Origin头与Origin头的值匹配,以示许可。
* cors系统定义了一种浏览器交互的方式来确定是否允许跨域请求。它是一种妥协，有更大的灵活性，但比起简单的允许所有的这些要求来说更加安全。cors就是为了让ajax实现可控的跨院访问而生的。
* [设置]在服务器端，Apache的mod_headers模块激活http头的设置，默认开启。
php头部需要代码:header(“Access-Control-Allow-Origin:*”);

1. jsonp不同于json，作为老浏览器的跨域解决方案
   cors与jsonp相比，无疑更为先进、方便和可靠。

   • jsonp只能实现get请求，而cors支持所有类型的http请求。
   • 使用cors，开发者可以使用普通的XHR发起请求和获取数据，比起jsonp有更好的错误处理。
   • jsonp主要被老的浏览器支持，它们往往不支持cors，而绝大多数的现代浏览器都已经支持了cors。

2. 百度有一种思路:由于调用任何js文件不涉及跨域问题,所以js脚本中可以编写调用远程服务器上的js文件,该文件实现你需要的业务。
   即a.js动态调用www.baidu.com/b.js ,其中b.js实现业务

   • 你可能想不到js脚本居然可以在服务器端运行。怪不得node.js的横空出世，在服务器端掀起了腥风血雨。