您的位置：首页 > 其它

ajax的简单介绍，

2015-09-24 23:23 429 查看

一、ajax（与服务器进行局部异步刷新）

执行流程：

1：ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)

2：等待用户执行操作(例如点击)

3：触发了事件处理代码

4：调用ajax引擎

5：发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求

6：服务器接受到了处理请求--开始处理

7：服务器将处理结果(xml或者文本)返回给了ajax引擎

8：监听相应数据

9：监听器对GUI数据更新

ajax的重要参数

重要参数：

onreadystatechange——注册一个监听器(绑定时间处理函数)

readyState返回与服务器通讯状态码Number类型

0对象创建，但是没有初始化

1对象建立但是没有调用

2发送数据(send方法被调用)

3数据传送中

4响应结束

responseText——服务器返回的文本

responseXML——服务器返回的xml dom对象

status 获得状态码

一段简单的ajax代码实例如下：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onclick="fun();">click me</button>
<script type="text/javascript">
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function fun(){
//1:获得ajax核心对象
var xhr=getXmlHttpRequest();
//打开一个新的请求
xhr.open('get','students.json',true);
//添加一个监听器
//监听器---ajax核心对象状态
xhr.onreadystatechange=function(){
//状态码来监听
//xhr.status---服务器响应状态 ---200   xhr.readyState---ajax状态码 4
if(xhr.status==200&&xhr.readyState==4){
//响应成功
var data=xhr.responseText;
var stus=eval(data);
alert(stus[0].name)
}
}
//发送请求
xhr.send(null);
}
</script>
</body>
</html></span>

注：1.cookie都是单会话cookie，浏览器关闭后这些cookie将会丢失

2.document.cookie="userId=828; expires=GMT_String";其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。

二、cookie的用法

<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
<script type="text/javascript">
/* //设置cookie，把字符串赋值给cookie
document.cookie ="name=luccy";
document.cookie ="age=32";

var strCookie=document.cookie;
alert(strCookie);
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userId;
//遍历cookie数组，处理每个cookie对</span>
<span style="font-size:18px;">for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
for(var j  = 0;j< arr.length;j++){
alert(arr[j]);
}
}

*//**
* 获取当前事件
* 设置cookie过期时间
* *//*
var date=new Date();
var expireDays=10;  //当用户再次登录刷新时间,十秒</span>
<span style="font-size:18px;">    //将date设置为10秒以后的时间
date.setTime(date.getTime()+expireDays*1000);
//将userId和userName两个cookie设置为10秒后过期
document.cookie="name=luccy; expires="+date.toGMTString();
*/
/* *
* 获取当前事件
* 删除/重置cookie
* */
/*    var data = new data();
data.setTime(data.getTime()-1000);
document.cookie="name=luccy; expire="+date.toGMTString();*/

</script>
</html></span></span></span>

三、localStorage的用法

1.测试浏览器是否支持localStorage

<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;">if(window.localStorage){
alert('这个浏览器支持本地存储');
}else{
alert('这个浏览器支持不本地存储');
}</span></span></span>

2，给localStorage赋值

<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;">    ①.localStorage.name = "json";//方法一
②.localStorage["age"] = "18";//方法二
③.localStorage.setItem("age","32");//方法三</span></span></span>

3，获得localStorage的值

<span style="font-size:18px;"><span style="font-size:24px;">   <span style="font-size:14px;">①.var name = localStorage.name；//方式一
②.localStorage.getItem("age")；//方式二</span>
</span></span>

4，清除ocalStorage的值

<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:14px;">    ①.localStorage.removeItem("a")</span>
</span></span>

5.通过localStorage.key(i)---取出所有key ，代码如下

<span style="font-size:18px;"><span style="font-size:24px;">l<span style="font-size:18px;">ocalStorage.getItem( localStorage.key(i))--通过key取  出所有value
var localStorage=window.localStorage;
for(var i=0;i<localStorage.length;i++){
alert(localStorage.key(i)+" "+localStorage.getItem( localStorage.key(i)))
}</span></span></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航