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.‘);‘;