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

---

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

tags: 前端,jQuery

grammar_cjkRuby: true

---

---

### 0 前言

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

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

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

```javascript

<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>

```

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

```javascript

<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>

```

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

```javascript

<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>

```

6. **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。

```javascript

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

```

2. **$.get()不只是下载静态页面**

* 向服务器提交请求下载数据。

```javascript

<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>

```

3. **$.getJSON()=$.get()方法+自动跨域**

* 优点：有返回值，可直接跨域

* 缺点：数据量小

* 提交方式：仅get(无$.postJSON)

```javascript

<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>

```

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

* post()函数使用post方式给服务器发送数据。

* 一般用于CRUD中的新增操作。

* ==但是它不能使用jsonp方式进行跨域请求==

5. **$.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:*"); 

4. **jsonp不同于json**，作为老浏览器的跨域解决方案

cors与jsonp相比，无疑更为先进、方便和可靠。

* jsonp只能实现get请求，而cors支持所有类型的http请求。

* 使用cors，开发者可以使用普通的XHR发起请求和获取数据，比起jsonp有更好的错误处理。

* jsonp主要被老的浏览器支持，它们往往不支持cors，而绝大多数的现代浏览器都已经支持了cors。

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

即a.js动态调用www.baidu.com/b.js ,其中b.js实现业务

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