妙味ajax笔记

ajax : Asynchronous JavaScript and XML 异步JavaScript和XML

 

用javascript异步形式去操作xml

 

数据交互

 

var oBtn = document.getElementById(‘btn‘);

 

 

oBtn.onclick = function() {

 

//打开浏览器

var xhr = new XMLHttpRequest();

//在地址栏输入地址

xhr.open(‘get‘,‘1.txt‘,true);

//提交

xhr.send();

 

//等待服务器返回内容

xhr.onreadystatechange = function() {

 

if ( xhr.readyState == 4 ) {

alert( xhr.responseText );

}

 

}

 

}

 

兼容ie6

 

//打开浏览器

/*

1.创建一个ajax对象

ie6以下new ActiveXObject(‘Microsoft.XMLHTTP‘)

*/

var xhr = null;

/*if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}*/

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

//在地址栏输入地址

/*

open方法

参数

1.打开方式

2.地址

3.是否异步

异步:非阻塞 前面的代码不会影响后面代码的执行

同步:阻塞 前面的代码会影响后面代码的执行

*/

xhr.open(‘get‘,‘1.txt‘,true);

//提交 发送请求

//alert(1);

xhr.send();

 

//alert(1)

 

//alert( xhr.responseText );

 

//等待服务器返回内容

xhr.onreadystatechange = function() {

 

if ( xhr.readyState == 4 ) {

alert( xhr.responseText );

}

 

}

 

抛出异常:

try {

//代码尝试执行这个块中的内容,如果有错误,则会执行catch{}, 并且传入错误信息参数

//alert(a);

//new throw();

//throw new Error(‘错了错了‘);

} catch (e) {

alert(e);

}

 

enctype : 提交的数据格式,默认application/x-www-form-urlencoded

 

readyState : ajax工作状态

responseText : ajax请求返回的内容就被存放到这个属性下面

on readystate change : 当readyState改变的时候触发

status : 服务器状态,http状态码

 

readyState属性:请求状态

0 (初始化)还没有调用open()方法

1 (载入)已调用send()方法,正在发送请求

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

3 (解析)正在解析响应内容

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

 

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

alert( xhr.responseText );

} else {

alert(‘出错了,Err:‘ + xhr.status);

}

}

 

xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded’); 数据头类型

 

可以下载一个json的包

 

//alert(JSON)

 

//stringify : 可以把一个对象转成对应字符串

 

var arr = [1,2,3];

var j = {left:100};

/*alert( JSON.stringify(arr) );*/

/*alert( JSON.stringify(j) );*/

 

//parse : 可以把字符串转成对应对象

var s1 = ‘[100,200,300]‘;

var a1 = JSON.parse(s1);

//alert(a1[0])

 

var s2 = ‘{"left":100}‘;

var a2 = JSON.parse(s2);

alert(a2.left)

 

封装ajax方法:

function ajax(method, url, data, success) {

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

 

if (method == ‘get‘ && data) {

url += ‘?‘ + data;

}

 

xhr.open(method,url,true);

if (method == ‘get‘) {

xhr.send();

} else {

xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);

xhr.send(data);

}

 

xhr.onreadystatechange = function() {

 

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

success && success(xhr.responseText);

} else {

alert(‘出错了,Err:‘ + xhr.status);

}

}

 

}

}

 

setInterval(function() {

ajax(‘get‘,‘getNews.php‘,‘‘,function(data) {

var data = JSON.parse( data );

 

var oUl = document.getElementById(‘ul1‘);

var html = ‘‘;

for (var i=0; i<data.length; i++) {

html += ‘<li><a href="">‘+data[i].title+‘</a> [<span>‘+data[i].date+‘</span>]</li>‘;

}

oUl.innerHTML = html;

});

}, 1000);

 

ajax({

url : ‘getNews.php‘,

success : function(data) {

//...

}

});

 

JSONP

 

跨域的问题

域:域名

跨域请求(访问):一个域名下的文件请求另外一个域名下的资源,就产生了跨域

跨域的解决

Jsonp : json with padding

 

跨域:跨域名

一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求

 

JSONP : JSON with Padding

    1.script标签

    2.用script标签加载资源是没有跨域问题的

把用请求的数据,用script引用的方式搞过来。

 

<script>

function fn(data) {

alert(data);

}

</script>

<script src="2.txt"></script>

 

2.txt里面的数据是:fn([1, 2, 3]) 这样数据就可以传过来了

 

在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情

 

然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去

 

当按钮点击的时候再去加载资源:

<script>

function fn(data) {

var oUl1 = document.getElementById(‘ul1‘);

var html = ‘‘;

for (var i=0; i<data.length; i++) {

html += ‘<li>‘+data[i]+‘</li>‘;

}

oUl1.innerHTML = html;

}

</script>

<script>

window.onload = function() {

var oBtn1 = document.getElementById(‘btn1‘);

oBtn1.onclick = function() {

var oScript = document.createElement(‘script‘);

oScript.src = ‘getData.php‘;

document.body.appendChild(oScript);

}

}

 

服务器jsonp接口代码:

<?php

$t = isset($_GET[‘t‘]) ? $_GET[‘t‘] : ‘num‘;

$callback = isset($_GET[‘callback‘]) ? $_GET[‘callback‘] : ‘fn1‘;

 

$arr1 = array(‘111111‘,‘22222222‘,‘33333333‘,‘4444444‘,‘555555555555555555555‘);

$arr2 = array(‘aaaaaaaaaaaa‘,‘bbbbbbbb‘,‘cccccccccccc‘,‘ddddddddd‘,‘eeeeeeeeeeee‘);

 

if ($t == ‘num‘) {

$data = json_encode($arr1);

} else {

$data = json_encode($arr2);

}

 

echo $callback.‘(‘.$data.‘);‘;

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。