ajax
1、ajax 原理
js提供了一个类 XMLHttpRequest,实例化该对象xhr= new XMLHttpRequest()
这个时候 可以通过xhr对象发送http请求,并接收返回的信息
所以 ajax 是xhr对象 执行http请求
2、xhr对象
a.创建xhr对象
xhr= new XMLHttpRequest();
b.xhr的方法
xhr.open('get/post',url,true/false);
//第一个参数是请求方式,url代表请求地址,第三个参数代表请求是异步还是同步
xhr.send([null])
//当使用get,或者post,只是请求而不发送数据的时候用null
//当使用post方式的时候,要发送数据,则这个参数格式是:name=lisi&age=18
c.xhr属性
注:ajax请求返回数据的类型只有两种(text和xml),而text又分为(text,html,json)
readyState // 请求的状态,从0-4变化,当变化到4时结束请求
responseText //请求后返回的内容
responseXML //请求xml返回的xml文档格式的内容
status //响应状态码,200 404 403等
statusText // 响应状态文字 ok not found forbidden
d.xhr事件
xhr.onreadystatechange = function(){}
//当readyState状态变化时 会被触发
3、xhr发送post查询
xhr.open('post',url,true);
data = 'name=lisi&age=18';
//注意要设置头信息
setRequsetHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
4、json串的处理
a.用原生的办法
eval( '(' + json + ')' )//在json串前后加括号 然后转换为可执行的代码
b.用JSON的parse方法
JSON.parse(json)
5、xml
a.书写格式 注意以下是固定格式
<?xml version='1.0' encoding='utf-8' ?>
<school>
<grade>
<class>
<student>
<sno>000001</sno>
<name>张三</name>
<sex>男</sex>
<age>18</age>
</student>
</class>
</grade>
</school>
b.ajax请求 返回的xml处理
xml也是对象,也是dom,可以直接进行dom操作来处理
如:
var name = return_xml.getElementsByTagName('name');//张三
6、ajax跨域 (ajax 默认情况下只能请求同域名下的内容)
a.HTML5 设置头信息来允许跨域访问
header('Access-Controll-Allow-Orign:*')//这个可以是*也可以是域名(192.168.2.136,192.168.3.164)
b.jsonp [严格说不是ajax技术]
i.通过一个连接的返回值[返回值是一个test(obj)这样的形式]
ii.然后可以用js来引入这个对应的地址
iii.最后在js里面写一个方法[如上面的test(obj)]来实现上面的返回
例子:
input.oninput = function (){
var url = 'http://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word='+encodeURI(this.value);
var sc = document.createElement('script');
sc.src = url;
head.appendChild(sc);
}
function suggest_so(obj){
for(var i=0,str='';i<obj.result.length;i++){
str += '<li>' + obj.result[i].word + '</li>';
}
ul.innerHTML = str;
tjian.style.display = 'block';
}
7、ajax文件上传
//文件上传实现进度条
xhr.upload.onprogoress = function(ev){
if(ev.lengthComputable == true){
var per = 100 * ev.loaded/total;//百分比
}
}
8、comet 反向ajax
最简单的模型
set_time_limit(0);
ob_start();
echo str_repeat(' ', 4000,'<br>');
ob_flush();
flush();
$i=0;
while (1) {
echo $i++.'<br>';
ob_flush();
flush();
sleep(1);
}
ajax 长轮询(适用于客户端)
客户请求数据,然后异步查询,
如果查到了数据那么返回数据并结束本次ajax请求,同时在客户端页面又立即发送刚才的ajax请求
如果没有查到数据,就一直查询(1秒查询一次sleep),直到有数据
小绵羊

浙公网安备 33010602011771号