ajax智能社,《智能社JS笔记--Ajax无刷新数据读取技术》.doc

《智能社JS笔记--Ajax无刷新数据读取技术》.doc

24.AJAX基础

ajax就是在不刷新页面的前提下让js可以读取服务器上的数据

什么是服务器

配置属于自己的服务器程序wamp\www

localhost

请求并显示静态txt文件

ajax(url，fnSucc，fnFaild)

放到服务器环境下的文件不能用中文命名

字符集编码，所有编码统一utf8、gb2312

缓存、组织缓存

缓存工作原理：根据url

解决：让url一直在变

‘aaa.txt？t=‘+new Date().getTime()//时间戳

动态数据

请求JS或json文件

所读取的东西是字符串

把字符串存的数组提出来eval()

存的是json

arr[0].a

[{user：‘blue‘，pass：‘123456’}，{user：‘blue‘，pass：‘123456’}，{user：‘blue‘，pass：‘123456’}，{user：‘blue‘，pass：‘123456’}]

解析出来的数组做循环

ajax原理

get请求——放入url传递

post请求——看不见

区别

1.get通过网址，post通过http Content

2.网址4k到10k，get方式容量非常有限，无法上传图片、文件，post容量大，2G

3.get安全性非常差，几乎没有安全性，post相对来说好一点

4.get有缓存，post没有缓存

用途：get获取数据，post向服务器传递信息

25.AJAX中级

编写ajax

从服务器取数据需要几步？

1.手机创建ajax对象

2.拨号连接到服务器

3.说告诉服务器，要那个文件——发送请求

4.听接收返回值

创建ajax对象

XMLHttpRequest()//除IE6

ActiveXObject(“Micorsoft.XMLHttp“)

做兼容if(XMLHttpRequest)

问题：IE6还是出错

变量和属性

全局变量window.a

window.alert

没定义a，直接报错，而用window.a，提示undefined

原因：用没有定义的变量会报错，并不是没有定义的变量而是没有定义的属性，不报错，提示undefined

做兼容正确方法if(window.XMLHttpRequest)

连接到服务器

aAjax.open(方法，文件名，true)

方法：‘GET’，‘POST’

同步人类：多件事情一起事情必须一件一件来

异步人类：事情一件一件来多个事情可以一起做

发送请求

oAjax.send()

接收返回

oAjax.onreadystatechange=function(){

if(oAjax.readyState==4)//读取完成，并不代表成功

{

if(oAjax.status==200)//成功

{

alert(‘成功：‘+oAjax.responseText)

}

else//失败 404

{

}

}

}

readyState

什么都没发生，未初始化，还没调用open()

1载入，已调用send()，正在发送请求

2载入完成，send()方法完成，已收到全部相应内容

3解析，正在解析响应内容

4完成，响应内容完成解析，可以在客户端调用了

封装

function ajax(url，fnSucc，fnFaild)

fnSucc(oAjax.responseText)

if(fnFaild)

{

fnFaild(oAjax.status)

}

数据类型

XML、json

字符集

所有文件字符集相同utf8