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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值