ajax笔记

Ajax

Asynchronous JavaScript and XML

 

1:ajax是什么?

答:标准的XHTML+CSS

动态的DOM操作

用XML进行数据的传输和交换

用XMLHttpRequest对象异步交换数据

用javascript把上述概念绑定.

 

2: ajax的几种名称

Ajax

无刷新技术

局部刷新技术

异步刷新技术

 

无刷新技术:

调用ajax程序的页面,从地址栏上看,没有变化,没有刷新,因此,无刷新技术

 

局部刷新技术:

调用ajax程序的页面,可能通过响应内容,动态的改变部分DOM节点

 

异步刷新技术:

Js会阻塞后面的js代码执行和html代码的渲染.

而用异步传输数据,不会阻塞后面js代码执行和html代码的渲染.

 

同步:就像打电话,电话不挂,人也不干其他的,等到挂电话后才能干其他的.

异步: 就像发短信,发完短信后,可以干其他的事情,同时等着短信回来.

 

3:XMLHttpRequest的详细属性

responseText: 服务器响应的主体信息,body信息. 

responseXML: 对于大量的格式化文档,可以用XML来传输或交换,由后台程序把数据封装在XML文档时, js接收XML对象并解析该内容.

status: 是服务器的返回状态码,例:200,成功, 403 forbidden 禁止, 404 not found未找到

50X系列,内部服务器错误

statusText: 服务器返回的状态码,对应的文字描述

readyState: XMLHttpRequest对象自身的状态码,0,4   [0,1,4], [2,3,4]

onreadystatechange : 事件属性,绑定当XMLHttpRequest对象的状态发生变化的时候,激发的函数

 

4:XMLHttpRequest的详细方法

open('请求方式',url, 同步/异步); false->同步, true->异步

send(null/参数), 参数的写法:k1=v1&k2=v2&kn=vn.....

setRequestHeader(key,value); 设置请求的头信息

Abort: 忽略,不要再进行下去了,到此为止

getResponseHeader: 获取响应的某个头信息

getAllResponseHeaders: 获取响应的所有头信息

 

 

 

XMLHttpquest对象在各浏览器中的兼容

 

 

先考虑标准情况,在高版本IE中,也可以用XMLHttpRequest对象来创建.
Ajax返回值

字符串: 

  短字符串:

    应用场景: 一般返回较短,具有标志的字符串,如,0/1, succ/fail, 已注册,未注册等.

  Json格式字符串:

应用场景: 返回数组或对象等格式化数据

 javascript object notation, javascript原生对象格式

  Html代码: 一整段html代码

     应用场景: 当页面上有大块的数据变化时, 用数组要牵涉到大量的DOM操作,

     这时,可以用PHP+Html,预先生成需要的html代码, 然后以字符串形式返回.

     再innerHTML到页面中去.

  Jsonp: 

XML

应用场景:返回大量的格式化数据时

如果返回XML来使用

需要1: 服务器端的返回明确指定返回类型XML

2:在客户端用 responseXML

Json的意义:

 

Json 出现的场景:

在PHP中, 有数组 $arr = array(1,2,3);

在C语言中,也有数组, arr = [1,2,3];

在js里, 也有数组, arr = [1,2,3]

 

 

PHP有数组, java有数组, C语句也有数组, javascript里也有数组,

各语言数组的定义也不一样,

如何把不同语言之间的数组让其他语言能够认识?

 

如何解决: 把各语言的数组转成大家都支持的一种格式,各语言就可以通信了.

 

 

 

Json就是一种轻量级的,通用的数组/对象转换格式.

 

PHP中如何应用json格式

PHP中,可以对对象/数组  , 应用 json_encode把对象/数组编成 json格式的字符串

也可以用json_decode把json格式的字符串转成 对象/数组

 

在javascript里,如果把json格式的字符串转成数组或对象?

答: 把该字符串表达式执行一下.

把json格式的字符串,用()包起来,再eval执行一下.

Eval(); // eval

 

Ajax的跨域传值

出于安全性考虑, XMLHttpRequest只允许访问相同域下的地址.

 

解决:iframe 

用同域代理来解决

Jsonp: 

参考地址:http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=查询词&callback=回调函数名
不用XMLHttpRequest对象,如何达到ajax的效果,比如投票效果

史前时代的ajax

通过动态的创建DOM对象,且DOM引用后台的程序文件,来达到请求服务器的目的,

比如,动态创建img对象,并设置对象.src 属性值为 后台的.php文件.

这样,当创建图片时,后台的PHP文件就会被请求

 

Jsonp原理:

动态的追加其他域下的js文件,

其他文件文件下返回的js文件有其内容, 

本利的回调函数,执行其内容.

 

Jsonp使用注意:

安全性, 远程给你一段js代码,安全性是未知的,要小心使用.

 

 

Ajax上传文件能实现吗?

XMLHttpRequest发送表单信息和硬盘上的文件内容. (比如一张图片的二进制信息)

 

表单信息,可以通过js操作DOM, 读取表单项的值,

硬盘的文件的内容, 也需要读取出来,一起发送到服务器.

Js能否读取硬盘文件呢?  不能. (html5里加了少量权限)

因为也无法ajax上传文件?