AJAX学习总结（入门）

介绍

读音：[ˈeɪˌdʒæks]

AJAX =Asynchronous JavaScript and XML（异步的JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

学习AJAX需要了解HTML、JS、CSS的知识。

作用

场景：

在网页上填写简历，页面中有几十项信息需要填写，填写过程中有若干项填写错误。

没有AJAX：

填写完成后，点击提交，上传所有信息，等待服务器的检查，再通知某一项填写错误。

使用AJAX：

      填写过程中，每填写完一项，立刻发送到服务器检查，实时提示某一项是否填写正确。

使用

AJAX使用XMLHttpRequest对象实现异步请求、局部刷新，使用方法如下：

·        运用HTML和CSS来实现页面，表达信息；

·        运用XMLHttpRequest和web服务器进行数据的异步交换；

·        运用JavaScript操作DOM，实现动态局部刷新。

创建 XMLHttpRequest 对象

var request;

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

     request = new XMLHttpRequest();

} else {// code for IE6, IE5

     request = new ActiveXObject("Microsoft.XMLHTTP");

}

XMLHttpRequest向服务器发送请求

request.open("GET","service.asp",true);

request.send();

方法

描述

open(method,url,async)

规定请求的类型、URL以及是否异步处理请求。

·         method：请求的类型；GET 或 POST

·         url：文件在服务器上的位置

·         async：true（异步）或 false（同步），默认为true

send(string)

将请求发送到服务器。

·         string：仅用于 POST 请求

GET：一般用于信息获取。

·           使用URL传递参数。

·           对发送信息的数量也有限制，一般在2000个字符。

POST：一般用于修改服务器上的资源。

·           对所发送信息的数量无限制。

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

·        无法使用缓存文件（更新服务器上的文件或数据库）

·        向服务器发送大量数据（POST没有数据量限制）

·        发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET 请求示例

一个简单的 GET 请求：

request.open("GET","service.asp",true);

request.send();

在上面的例子中，得到的可能是缓存的结果。为了避免这种情况，可以向URL添加一个唯一的ID：

request.open("GET","service.asp?t=" + Math.random(),true);

request.send();

如果需要在GET方法中传递参数，需要在URL中添加信息：

request.open("GET","service.asp?fname=Bill&lname=Gates",true);

request.send();

POST 请求示例

使用POST请求传递参数，一定要记得在open和send方法之间使用setRequestHeader方法设置Content-Type为“application/x-www-form-urlencoded”：

request.open("POST","service.asp",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send("fname=Bill&lname=Gates");

XMLHttpRequest取得服务器的响应

当请求被发送到服务器时，客户端需要执行一些基于响应的任务。

当使用async=true时，可通过onreadystatechange事件处理服务器的应答：

request.onreadystatechange=function(){

if (request.readyState==4 && request.status==200){

        //显示服务器返回的结果

document.getElementById("result").innerHTML=request.responseText;

    }

}

每当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

·         0: 请求未初始化，即open还没有调用

·         1: 服务器连接已建立，即open已经调用

·         2: 请求已接收，即已接收到头信息

·         3: 请求处理中，即已接收到响应主体

·         4: 请求已完成，且响应已就绪，即响应已完成

status

200: "OK"

404: 未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪。

示例

视频教程：http://www.imooc.com/video/5913

例子简介：

·        查询员工信息，可以通过输入员工编号查询员工的基本信息。

·        新建员工信息，包含员工姓名、编号、性别、职位。

源码：ajax示例源码

扩展知识：

·        PHP介绍及简单示例。（使用PHP实现服务器端的查询和新建功能）

·        XAMMP介绍及启动。（XAMPP包含Apache、MySQL、PHP、PERL，是一个功能强大的建XAMPP软件站集成软件包）

·        Dreamweaver中配置web服务器，制作网站，进行本地测试。

·        Fiddler监听HTTP请求。（无需客户端代码既可测试服务器代码）。

扩展一：JSON

介绍

JSON：JavaScript对象表示法（JavaScript Object Notation）。

JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。

JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行。

与XML比较

JSON的长度和XML格式比起来很短小。

JSON读写的速度比XML快。

JSON可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便。

与AJAX的关系

在AJAX中，使用JSON传递数据已成为事实上的标准，很少使用XML。

语法

JSON数据的书写格式是：名称/值对。

例如：”name”:”ZhangSan”

注意：与JavaScript的对象表示法有些区别，就是键值在JS中不需要使用引号，但是在JSON中必须要有引号。

JSON的值可以是下面这些类型：

·        数字（整数或浮点数），比如123，1.23

·        字符串（在双引号中）

·        逻辑值（true或false）

·        数组（在方括号中）

·        对象（在花括号中）

·        null

例如：

{

    "staff": [

        {

            "name": "user1",

            "age": 23

        },

        {

            "name": "user2",

            "age": 22

        },

        {

            "name": "user3",

            "age": 21

        }

    ]

}

解析

JSON在JS中的解析有两种方法：eval和JSON.parse。

var jsondata = ‘{"staff": [{"name": "user1","age": 23},{"name": "user2","age": 22},{"name": "user3","age": 21}]}’;

var jsonobj = eval(‘(’ + jsondata + ‘)’);

alert(jsonobj.staff[0].name);

在代码中使用eval是很危险的，eval无法捕获json对象中的语法错误！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

var jsondata = ‘{"staff": [{"name": "user1","age": 23},{"name": "user2","age": 22},{"name": "user3","age": 21}]}’;

var jsonobj = JSON.parse(jsondata);

alert(jsonobj.staff[0].name);

校验及格式化

JSON在线校验工具：http://jsonlint.com/

示例

视频教程：http://www.imooc.com/video/6159

扩展二：jQuery

介绍

jQuery是一个轻量级的JavaScript库。

jQuery极大地简化了JavaScript编程。

与AJAX的关系

jQuery中封装了AJAX的方法，利用第三方库可以不考虑浏览器，简化操作。

语法

基础语法：

$(selector).action();

获取指定ID的对象的值：

$(“#id”).val();

设置指定ID的innerHTML的值：

$(“#id”).html(string);

使用AJAX：

$.ajax({settings})

·        type：类型，“POST”或“GET”，默认为“GET”

·        url：发送请求的地址

·        data：是一个对象，连同请求发送到服务器的数据

·        dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来只能判断，一般我们采用json格式，可以设置为“json”

·        success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

·        error：是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象

示例

$.ajax({

type:"POST",

url:"servicejson.php",

dataType:"json",

data:{

name: $("#name").val(),

number: $("#number").val(), 

sex: $("#sex").val(),

job: $("#job").val()

},

success: function(responseJson){

if (responseJson.success){

$("#createResult").html(responseJson.msg);

}else{

$("#createResult").html("出现错误："+responseJson.msg);

                 }

},

error: function(xmlHttpRequest){

alert("error:"+xmlHttpRequest.status);

}

});              

扩展三：跨域问题的处理

介绍

域名地址的组成：

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

不同域之间相互请求资源，就算做“跨域”。

与AJAX的关系

JavaScript出于安全方面的考虑，有同源策略的限制，不允许跨域调用其他页面的对象。

解决方法一：代理

通过在同域名的web服务器端创建一个代理。

例如：

北京服务器（域名：www.beijing.com）

上海服务器（域名：www.shanghai.com）

可以在北京的web服务器的后台建立一个上海服务器的代理www.beijing.com/proxy-shanghaiservice.asp来调用上海服务器www.shanghai.com/service.asp的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

解决方法二：JSONP

JSONP可以解决主流浏览器的跨域数据访问的问题，只能解决GET方法的跨域访问。

在前端代码中声明jsonp：

$.ajax({

type:"GET",

url:"http://127.0.0.1:8080/ajaxdemo/servicejsonp.php?number="+$("#idNum").val(),

dataType:"jsonp",

jsonp:"callback",

success: function(responseJson){

if (responseJson.success){

$("#searchResult").html(responseJson.msg);

}else{

$("#searchResult").html("出现错误："+responseJson.msg);

}

},

error: function(xmlHttpRequest){

alert("error:"+xmlHttpRequest.status);}

}

);               

在后台代码（PHP）中调用：

function get(){

$jsonp = $_GET["callback"];

echo $jsonp.'({"success":true,"msg":"Method GET!"})';

}                

 

解决方法三：XMLHttpRequest Level2

HTML5提供的XMLHttpRequest Level2（XHR2）实现了跨域访问。

不过IE10以下的版本不支持XHR2这一标准。

使用XHR2只需要在服务器端的代码中添加两行代码允许跨域访问即可：

header("Access-Control-Allow-Origin:*");

header("Access-Control-Allow-Methods:POST,GET");

学习资源

AJAX教程：http://www.w3school.com.cn/ajax/index.asp

AJAX视频教程：http://www.imooc.com/view/250

JSON教程：http://www.w3school.com.cn/json/index.asp

jQuery教程：http://www.w3school.com.cn/jquery/index.asp