服务器与 Ajax

[ 初识 Ajax ] 1999年，微软公司发布 IE5，第一次引入新功能：允许 JS 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到 2004 年，Gmail 发布和 2005 年 Google Map 发布，才引起广泛重视。

术语 Ajax 最早产生于 2005 年，指的是围绕上述功能进行开发的一整套做法。帅气的美国大叔 Jesse James Garrett，05 年发表了一篇文章《 A New Approach to Web Applications 》，提出了一个概念：Asynchronous JavaScript and XML（异步 JavaScript 和 XML，简称 Ajax ），也就是说，用 JavaScript 异步的获取 XML 作为数据交换的格式。从此，Ajax 成为脚本发起 HTTP 通信的代名词，W3C 也在 2006 年发布了它的国际标准。

虽然名字中包含 XML，但 Ajax 通信与数据格式无关。

而且，现在的 Ajax 并不仅仅局限于XML作为数据交换格式，还可以是文本、XML、HTML、JSON等。

[ 前后端数据交互 ] Ajax 不是像 HTML、JS 或 CSS 这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（ JS、Web 浏览器和 Web 服务器），它使我们可以获取和显示新的内容而不必载入一个新的 Web 页面（换句话说就是，这一技术能够向服务器请求额外的数据而无需卸载页面），会带来更好的用户体验，更有桌面程序的感觉。

[ Ajax 可以做什么？ ]

显示新的 HTML 内容而不用载入整个页面

提交一个表单并且立即显示结果

登录而不用跳转到新的页面

星级评定组件

遍历数据库信息加载更多而不刷新页面

...

原生 Ajax 通信流程

[ 原生 API ？！] Ajax 通过原生的 XMLHttpRequest 对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

重点关注 xhr 对象的三个属性：readyState、status、responseText。

Ajax 包括以下几个步骤：1、创建 Ajax 对象；2、发送 HTTP 请求；3、接收服务器返回的数据；Then，更新网页数据。

<form>
	用户名：
	<input type="text" name="username" id="username"><span id="info"></span>
	<br>密码：
	<input type="text" name="password" id="password">
	<input type="button" value="登录" id="btn">
</form>

<script>
window.onload = function(){
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        var uname = document.getElementById('username');
        var pw = document.getElementById('password');
 
        // ajax包括以下几个步骤：
           第一步：创建 xhr 对象
           第三步：接收服务器传回的数据
              ... 
           第二步：发送http请求(get|post...) - 准备发送 & 执行发送动作
    }
}
</script>

<form>

用户名：

<br>密码：

</form>

window.onload = function(){

var btn = document.getElementById('btn');

btn.onclick = function(){

var uname = document.getElementById('username');

var pw = document.getElementById('password');

// ajax包括以下几个步骤：

第一步：创建 xhr 对象

第三步：接收服务器传回的数据

...

第二步：发送http请求(get|post...) - 准备发送 & 执行发送动作

}

</script>

最后，更新网页数据
// message.xml
   <p>hello world</p>

最后，更新网页数据

// message.xml

<p>hello world</p>

进阶：jQuery 中的 $.ajax({}) / $.load() 方法

jQuery 提供了一些日常开发中需要的快捷操作，例如 load、ajax、get 和 post 等，使用 jQuery 开发 ajax 将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上，而不需要理会那么繁琐的 XMLHTTPRequest 对象。

[ $.ajax() 方法 ] jQuery 对 Ajax 操作进行了封装，在 jQuery 中：

$.ajax() 是最底层、功能最强大的请求服务器数据的方法；

第 2 层是：load()、~~$.get()~~ 和 ~~$.post() 方法~~； // $.ajax() 相关 API 及全局事件？！

第 3 层是：~~$.getScript()~~ 和 ~~$.getJSON() 方法~~。

ajax() 方法不仅可以获取服务器返回的数据，还能向服务器发送器请求并传递数值，其调用格式如下：

$.ajax([settings]) // 其中，参数settings为发送ajax请求时的配置对象，在该对象中： // url：表示服务器请求的路径； // data：为请求时传递的数据； // dataType：为服务器返回的数据类型； // success：为请求成功时执行的回调函数； // type：为发送数据请求的方式，默认为get

1
2
3
4
5
6
7
8

$.ajax([settings])

// 其中，参数settings为发送ajax请求时的配置对象，在该对象中：
//          url：表示服务器请求的路径；
//          data：为请求时传递的数据；
//          dataType：为服务器返回的数据类型；
//          success：为请求成功时执行的回调函数；
//          type：为发送数据请求的方式，默认为get

 <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">测试</button> <div id="result"></div> <script> $('#send').click(function(){ $.ajax({ url:'jqRequest.php', type:'POST', data:{ num:$('#num').val() }, success:function(data){ $('#result').html('您选择的数字' + $('#num').val() + '是' + data); } }) }) </script>  <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶数'; }else{ echo '奇数'; } ?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.ajax({
      url:'jqRequest.php',
      type:'POST',
      data:{
        num:$('#num').val()
      },
      success:function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data);
      }
    })
})
</script>


<?php
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

// 常用参数如下：名称值/描述 async 布尔值，表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在success和error函数之后） contentType 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded" context 为所有 AJAX 相关的回调函数规定 "this" 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 success(result,status,xhr) 当请求成功时运行的函数。 timeout 设置本地的请求超时时间（以毫秒计）。 traditional 布尔值，规定是否使用参数序列化的传统样式。 type 规定请求的类型（GET 或 POST）。 url 规定发送请求的 URL。默认是当前页面。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 常用参数如下：
名称                         值/描述
async                       布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)             发送请求前运行的函数。
cache                       布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)        请求完成时运行的函数（在请求成功或失败之后均调用，即在success和error函数之后）
contentType                 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded"
context                     为所有 AJAX 相关的回调函数规定 "this" 值。
data                        规定要发送到服务器的数据。
dataFilter(data,type)       用于处理 XMLHttpRequest 原始响应数据的函数。
dataType                    预期的服务器响应的数据类型。
error(xhr,status,error)     如果请求失败要运行的函数。
global                      布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified                  布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp                       在一个 jsonp 中重写回调函数的字符串。
jsonpCallback               在一个 jsonp 中规定回调函数的名称。
password                    规定在 HTTP 访问认证请求中使用的密码。
processData                 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset               规定请求的字符集。
success(result,status,xhr)  当请求成功时运行的函数。
timeout                     设置本地的请求超时时间（以毫秒计）。
traditional                 布尔值，规定是否使用参数序列化的传统样式。
type                        规定请求的类型（GET 或 POST）。
url                         规定发送请求的 URL。默认是当前页面。
username                    规定在 HTTP 访问认证请求中使用的用户名。
xhr                         用于创建 XMLHttpRequest 对象的函数。

[ load 方法 ] 其作用是从服务器中加载数据，是一个简单但强大的 Ajax 方法。

// 调用格式
load(url,[data],[callback])

//  其中，参数url为加载服务器地址，
//  可选项data参数为请求时发送的数据，
//  callback参数为数据请求成功后，执行的回调函数

// 调用格式

load(url,[data],[callback])

// 其中，参数url为加载服务器地址，

// 可选项data参数为请求时发送的数据，

// callback参数为数据请求成功后，执行的回调函数

[1] Ajax 如何加载别的页面（HTML文档）？

$('#result').load('ajax/test.html'); // 如果选择器没有匹配的元素，如document不包含id="result"的元素，这个Ajax请求将不会被发送出去

1
2

$('#result').load('ajax/test.html');
// 如果选择器没有匹配的元素，如document不包含id="result"的元素，这个Ajax请求将不会被发送出去

 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <style> h6{margin:4px;} p{margin: 0;} </style> <body> <input type="button" id="send" value="ajax获取"> <div class="comment">已有评论:</div> <div id="resText"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html') }) }) </script>  <div class="comment"> <h6>张三：</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四：</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五：</h6> <p class="para">地板.</p> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>
h6{margin:4px;}
p{margin: 0;}
</style>

<body>
<input type="button" id="send" value="ajax获取">
<div class="comment">已有评论:</div>
<div id="resText"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html')
    })
})
</script>


<div class="comment">
    <h6>张三：</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四：</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五：</h6>
    <p class="para">地板.</p>
</div>

[2] 如何加载页面的一部分呢？— 如果url参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是jQuery的选择器，从而决定应该加载返回结果中的哪部分内容。

$('#result').load('ajax/test.html #container');

1

$('#result').load('ajax/test.html #container');

当这种方法执行, 它将检索ajax/test.html返回的页面内容，jQuery会获取ID为container元素的内容，并且插入到ID为result元素，而其他未被检索到的元素将被废弃。

$(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para') }) })

1
2
3
4
5

$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para')
    })
})

[ 传递方式 ] load()方法默认使用GET方式，如果data参数提供一个对象，那么使用POST方式。

//无参数传递，则是GET方式 $('#resText').load('tset.php') //有参数传递，则是POST方式 $('#resText').load('tset.php',{name:'rain',age:'22'})

1
2
3
4
5

//无参数传递，则是GET方式
$('#resText').load('tset.php')

//有参数传递，则是POST方式
$('#resText').load('tset.php',{name:'rain',age:'22'})

[ 回调函数 ] 如果提供了"complete"回调函数，它将在函数处理完之后，并且HTML已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且this始终指向当前正在处理的DOM元素。

回调函数有3个参数，分别代表请求返回的内容、请求状态和XMLHTTPRequest对象。

$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) { //responseText :请求返回的内容 //testStatus: success、error、notmodified、timeout四种 //XMLHTTPRequest: XMLHTTPRequest对象 });

1
2
3
4
5

$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) {
  //responseText :请求返回的内容
  //testStatus: success、error、notmodified、timeout四种
  //XMLHTTPRequest: XMLHTTPRequest对象
});

<style> h6{margin:4px;} p{margin: 0;} #test{border:1px solid black;} </style> <input type="button" id="send" value="ajax获取"> <div class="comment">已有评论:</div> <div id="resText"></div> <div id="test"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){ $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c); }) }) }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style>
h6{margin:4px;}
p{margin: 0;}
#test{border:1px solid black;}
</style>

<input type="button" id="send" value="ajax获取">
<div class="comment">已有评论:</div>
<div id="resText"></div>
<div id="test"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){
            $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c);
        })
    })
})
</script>

Ajax 跨域