澳门新葡萄京娱乐场 2

澳门新葡萄京娱乐场JavaScript学习总结Ajax和HTTP状态字

Ajax及其工作原理

AJAX
是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。

AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com';或者使用服务器代理,代理XMLHttpRequest文件

AJAX是基于现有的Internet标准,并且联合使用它们:

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

澳门新葡萄京娱乐场 1

ajax简介

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及
Opera)均内建 XMLHttpRequest 对象。

创建Ajax对象:

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")

AJAX即”AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

连接服务器

oAjax.open(方法,url,是否异步)

我们都知道,Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。所以,Ajax天生就是工作在异步模式的(异步为true,同步false)

Ajax包括:

同步和异步

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
澳门新葡萄京娱乐场,异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
(简单点说:同步就是只能一件一件事的来做,而异步就是可以多件事同时进行)

  • XHTML和CSS
  • 使用文档对象模型(DocumentObjectModel)作动态显示和交互
  • 使用XML和XSLT做数据交互和操作
  • 使用XMLHttpRequest进行异步数据接收

发送请求send()

<script type="text/javascript">
function getDoc(){
    var xmlhttp;
    if(window.xmlhttpRequest){
        xmlhttp=new XMLHttpRequest();
    }
    else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6
    }
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            document.getElementById("myId").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", index.php,true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <button type="button" onclick="getDoc()">请求数据</button>
</body>

GET 还是 POST?

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

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

利用AJAX可以做:

接收返回信息

oAjax.onreadystatechange = function(){   //当请求状态改变时要调用的事件处理器

    alert(oAjax.readystate);           

}

只要readyState属性的值发生变化时,便会触发一次readyStatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪,不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子:

var xhr = createXHR();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.statusText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);
  • 注册时,输入用户名自动检测用户是否已经存在。
  • 登陆时,提示用户名密码错误
  • 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

XHR对象

XMLHttpRequest这个对象的属性:

它的属性有:

onreadystatechange  每次状态改变所触发事件的事件处理程序。

responseText     从服务器进程返回数据的字符串形式。
responseXML    从服务器进程返回的DOM兼容的文档数据对象。

status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

status Text       伴随状态码的字符串信息

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState就是XHR请求的状态属性,它本身有5个属性值:

0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以再客户端使用了

原生ajax

HTTP状态码

1字头:消息。这一类型的状态码,代表请求已被接受,需要继续处理。
2字头:成功。这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头:客户端错误。这类状态码代表了客户端看起来可能发生错误,妨碍了服务器的处理。
5字头:服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

另附:http状态码详解
w3cschool HTTP
状态消息:

澳门新葡萄京娱乐场 2

一、XMLHttpRequest对象

status和statusText

statusText是响应返回的文本信息,仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

XHR的方法

方法 描述
abort() 导致当前正在执行的请求被取消
getAllResponseHeaders() 返回包含所有响应头的名称和值的单个字符
getResponseHeader(name) 返回响应头中指定的名称和值
open(method,url,async,username,pwd) 设置HTTP方法(get或post)等
send(content) 发出带有指定主体内容的请求
setRequestHeader(name,value) 使用指定的名称和值设置请求头
<script type="text/javascript">
        var oAjax =oAjax();
        alert(oAjax.readyState);//弹出"0"
        oAjax.open("get","index.html",true);
        alert(oAjax.readyState);//弹出"1"
        oAjax.send(null);
        alert(oAjax.readyState);//IE下弹出4,而firefox是2
        //可以通过readystatechange事件监听
        oAjax = XHR();
        oAjax.onreadystatechange = function () {
            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后还会再来个1
            //IE下则是1,1,3,4
        };
        oAjax.open("get","index.txt",true);
        oAjax.send(null);
</script>

使用XHR时,首先要调用open()方法

jQuery中的Ajax

.load()方法是局部方法,因为他需要一个包含元素的jQuery对象作为前缀,而$.get()$.post()是全局方法,无需指定某个元素,对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()$.post()更加合适。

GET和POST传入的data是一个键值对
对象,不同的是GET传入的data是通过地址栏传输的,而POST是通过表单提交的,

$(function () {
    $("input").click(function () {
        $.get('test.php?url=baidu.com', function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});

POST提交不能使用url传参。post提交可以使用字符串形式的键值对形式传参,自动转换为http消息实体传参

$(function () {
    $("input").click(function () {
        $.post('test.php','url=baidu.com', function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});

//post提交可以使用对象键值对

$(function () {
    $("input").click(function () {
        $.post('test.php',{
                url:'baidu.com'//post提交可以使用对象键值对
            }, function (response,status,xhr) {
            $('#box').html(response);
        })
    })
});

$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数type,即服务器返回的内容格式,包括xml,json,script,html,text等,第一个参数为必选参数,后面三个为可选参数

$.ajax()是所有Ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装,这个方法只有一个参数,传递一个
各个功能键值对的对象。

 

$.ajax()方法对象参数列表

参数 类型 说明
url string 发送请求的地址
type string 请求方法,默认GET
timeout Number 设置请求超时的时间
data Object或String 发送到服务器的对象,键值对字符串或对象
datatype String 返回的数据类型,比如html,XML,json等
success Function 请求成功后调用的回调函数
complete Function 请求完成后调用的回调函数
error Function 请求失败后调用的回调函数
$(function () {
    $("input").click(function () {
        $.ajax({
            type : "POST",
            url: 'test.php',
            data:{
                url: 'baidu.com'
            },
            success : function(response,status,xhr){
                $('#box').html(response);
            }
        })
    })
});
voidopen(Stringmethod,Stringurl,Boolenasync)

表单序列化

Ajax用的最多的地方莫过于表单操作,而传统的表单操作是通过submit提交将数据传输到服务器,如果使用Ajax异步处理
的话,我们需要将每个表单元素获取才能提交,这样工作效率就大大降低

<body>
<form action="">
    用户名: <input type="text" name="user" />
    邮件: <input type="text" name="email" />
    <input type="button" value="提交"/>
</form>
<div id="box"></div>
<script type="text/javascript">
    $(function () {
        $("form input[type=button]").click(function () {
            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: {
                    user: $('form input[name=user]').val(),
                    email: $("form input[name=email]").val(),
                },
                success: function(response){
                    $("#box").html(response);
                }
            })
        })
    });
</script>
</body>

表单元素特别多的情况下应采用表单序列化,即data:$(“form”).serialize();//得到的是字符串键值对,并且对url进行编码

serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框,复选框和下拉列表框等内容

<body>
<form action="">
    用户名: <input type="text" name="user" />
    邮件: <input type="text" name="email" />
    <input type="button" value="提交"/>
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女"/>女
    <input type="button" value="submit"/>
</form>
<div id="box"></div>
<script>
    $(function () {
        $("form input[name=sex]").click(function () {
            $('#box').html(decodeURIComponent($(this).serialize()));
        })
    })
</script>
</body>

 

传统Ajax问题

传统的ajax有如下的问题:

1、可以无刷新改变页面内容,但无法改变页面URL

2、为了更好的可访问性,内容发生改变后,通常改变URL的hash

3、hash的方式不能很好的处理浏览器的前进、后退等问题

4、进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

5、但这种方式对搜索引擎很不友好

6、twitter和google约定了使用#!xxx(即hash第一个字符为!),搜索引擎进行支持。

用于创建请求
参数:

JavaScript学习系列文章目录

  • JavaScript学习总结(一)基础部分
  • JavaScript学习总结(二)数组和对象部分
  • JavaScript学习总结(三)BOM和DOM详解
  • JavaScript学习总结(四)function函数部分
  • JavaScript学习总结(五)原型和原型链详解
  • JavaScript学习总结(六)数据类型和JSON格式
  • JavaScript学习总结(七)Ajax和Http状态字
  • JavaScript学习总结(八)正则表达式
  • JavaScript学习总结(九)事件详解

method:请求方式(字符串类型),如:POST、GET、DELETE…

url:要请求的url地址(字符串类型)

async:是否异步发送请求(布尔类型),true表示是以异步的形式,所以基本上都是取true
需要说明两点:一是url相对于执行代码的当前页面,当然也可以使用绝对路径。二是调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。

只能向同一个域中使用相同端口和协议的url发送请求,否则会引发安全错误。

要发送特定的请求,必需调用send()方法

 

voidsend(Stringbody)

用于发送请求
参数:
body:要发送的数据(字符串类型)

 

 

xhr.open("get","example.php",false);
xhr.send(null);

 

由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。在收到响应之后,相应的数据会自动填充XHR对象的属性,相关的属性简介如下:

  • responseText:作为响应主体被返回的文本。
  • responseXML:如果响应的内容类型是“text/xml”或”application/xml”,这个属性中将保存包含着相应数据的XMLDOM文档。
  • status:响应的HTTP状态。
  • statusText:HTTP状态的说明。

接受响应之后,第一步是检查status属性,以确定响应已经成功返回。状态码:

  • 200表示成功
  • 304表示请求的资源并没有修改,可以直接使用浏览器中缓存的版本,响应也是有效的

像下面这样检查上述这两种状态码的状态:

 

 

xhr.open("get","example.txt",false);
xhr.send(null);
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
alert(xhr.responseText);
}else{
alert("Requestwasunsuccessful:"+xhr.status);
}

 

注意:无论内容类型(Content-Type)是什么,响应主体的内容都会保存到responseText属性中;而对于非XML数据而言,responseXML属性的值将为null。

 

3.发送异步请求

但多数情况下,我们还是要发送异步请求,才能让JavaScript继续执行而不必等待响应。此时,可以检测XHR对象的readyState属性,该属性表示请求/响应过程中的当前活动阶段。这个属性可取的值如下:

 

  • 0:未初始化。尚未调用
    open() 方法。
  • 1:启动。已经调用
    open() 方法,但尚未调用 send() 方法。
  • 2:发送。已经调用
    send() 方法,但尚未接收响应。
  • 3:接收。已经接收到部分响应数据。
  • 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

 

只要
readyState 属性的值由一个值变为另一个值,都会触发一次 readystatechange
事件。可以利用这个事件来检测每次状态变化后的 readyState
的值,通常,我们只对 readyState 值为 4
的阶段感兴趣,因为这时所有的数据都已经就绪。不过,必须在调用 open()
之前指定 onreadyState
事件处理程序才能确保跨浏览器兼容性。例子如下:

 

var xhr = createXHR();
xhr.onreadyStatechange = function(){
 if(xhr.readyState == 4){
     if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
         alert(xhr.responseText);
     }else{
         alert("Request was unsuccessful:" + xhr.status );
     }
 }
};
xhr.open("get","example.txt",true);
xhr.send(null);

 

另外,在接收到响应之前还可以调用
abort() 方法来取消异步请求,如下所示:

 

 

xhr.absort();

 

调用这个方法后,XHR
对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。

二、HTTP头部信息

涉及的几个函数:

1.void setRequestHeader(String header,String value)
用于设置请求头
参数:
header:请求头的key(字符串类型)
vlaue:请求头的value(字符串类型)
2.String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
3.String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header:响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值

每个 HTTP
请求和响应都会带有响应的头部信息,有的对开发人员有用,有的也没有什么用,XHR
对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。
默认情况下,在发送 XHR
请求的同时,还会发送下列头部信息(基本上所有浏览器都会发送的)。

  • Accept:
    浏览器能够处理的内容类型。
  • Accept-Charset:
    浏览器能够显示的字符集。
  • Accept-Encoding:
    浏览器能够处理的压缩编码。
  • Accept-Language:
    浏览器当前设置的语言。
  • Connection:
    浏览器与服务器之间连接的类型。
  • Cookie:
    当前页面设置的任何Cookie。
  • Host:
    发出请求的页面所在的域。
  • Referer:
    发出请求的页面的URI。注意,HTTP规范吧这个头部字段拼写错了,正确的拼写方法是referrer,但是为了保证和规范一致,就将错就错了。
  • User-Agent:
    浏览器的用户代理字符串。

使用
setRequestHeader()
方法可以设置自定义的请求头部信息。这个方法接受两个参数:头部字段的名称和头部字段的值。要成功发送请求头部信息,必须在调用
open() 方法之后且调用 send() 方法之前调用
setRequestHeader()
,如下面的例子所示。

var xhr = createXHR();
xhr.onreadystatechange = function(){
 if(xhr.readyState == 4){
     if((xhr.status >= 200 && xhr.status < 300) || xhr.status = 304){
         alert(xhr.responseText);
     }else{
         alert("Request was unsuccessful: " + xhr.status);
     }
 }
};
xhr.open("get","example.php",true);
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null); 

服务器在接收到这种自定义的头部信息之后,可移植性响应的后续操作。建议使用自定义的头部字段名称,不要使用浏览器正常发送的字段名称

调用 XHR
对象的 getResponseHeader()
方法并传入头部字段名称,可以取得相应的响应头部信息。而调用
getAllResponseHeaders()
方法可以取得一个包含所有头部信息的长字符串。看下面的例子:

var myHeader=xhr.getResponseHeader("MyHeader");
var allHeader=xhr.getAllResponseHeaders();

三、GET请求

GET
是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以讲查询字符串参数追加到
URL 的末尾,以便将信息发送给服务器。对 XHR 而言,位于传入 open() 方法的
URL 末尾的查询字符串必须经过正确的编码才行。
使用 GET
请求经常会发生的一个错误,及时查询字符串的格式有问题。查询字符串中每个参数的名称和值必须使用
encodeURIComponent() 进行编码,然后才能放到 URL
的末尾;而且所有名-值对都必须由和号(&)分隔,例子如下:

xhr.open("get","example.php?name1=value1&name2=value2",true);

下面这个函数可以辅助向现有
URL 的末尾添加查询字符串参数:

function addURLParam(url,name,value){
    url += (url.indexOf("?") == -1? "?":"&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
}

使用方法:

var url="example.php";

//添加参数
url = addURLParam(url,"name","Nocholas");
url = addRULParam(rul,"book","Professional JavaScript");

//初始化请求
xhr.open("get",url,false);

四、POST请求

POST
请求通常用于向服务器发送应该被保存的数据。POST
请求应该吧数据作为请求的主体提交,而 GET 请求传统上不是这样。
默认情况下,服务器对 POST 请求和提交 Web
表单的请求并不会一视同仁。因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。不过,我们可以使用
XHR 来模仿表单提交:首先将 Content-Type 头部信息设置为
application/x-www-from-urlencoded,也就是表单提交时的内容类型,其次是以适当的格式创建一个字符串。
如下所示:

function submitData(){
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status = 304){
                alert(xhr.responseText);
            }else{
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    xhr.open("post","example.php",true);
    xhr.setRequestHeader("Content-Type","application/x-www-from-urlencoded");
    var form=document.getElementById("user-info");
    xhr.send(serialize(form));
} 

这个函数可以将 ID 为 “user-info” 的表单中的数据序列化之后发送给服务器

发表评论

电子邮件地址不会被公开。 必填项已用*标注