您的位置:首页 > 其它

AJAX学习总结(入门)

2015-03-03 09:57 204 查看

介绍

读音:[ˈ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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: