码迷,mamicode.com
首页 > Web开发 > 详细

Ajax笔记-加强版

时间:2017-07-22 16:57:09      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:utf-8   执行   资源文件   长度限制   else   append   加载   gettime   产生   

AJAX :
 
Asynchronous JavaScript and XML 异步JavaScript和XML
 
用javascript异步形式去操作xml 进行数据交互
 
节省用户操作,时间,提高用户体验,减少数据请求
传输获取数据
 
1、form:
 
表单:数据的提交
action : 数据提交的地址,默认是当前页面
enctype : 提交的数据格式,默认application/x-www-form-urlencoded
method : 数据提交的方式,默认是get方式
 
method:
 
1)get
把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面
url长度限制的原因,我们不要通过get方式传递过多的数据
 
<form action="get.php" enctype="application/x-www-form-urlencoded">
 
2)post
理论上无限制
 
<form action="post.php" method="post">
 
2、Get和Post的区别:
 
 
传输方式的区别:Get通过url地址传输。Post通过浏览器内部传输
传输数据量:Get有数据量限制,每个浏览器都不同。Post理论上无限
 
后端数据的接收(PHP):
 
$_GET- 通过URL传递给该脚本的变量的数组
$_POST- 通过HTTP POST方法(表单)传递给该脚本的变量的数组
前后台键名和传输方式必须一致
 
 
3、try catch:
 
try {
//代码尝试执行这个块中的内容,如果有错误,则会执行catch{}, 并且传入错误信息参数
//alert(a);
//new throw();
//throw new Error(‘错了错了‘);无论前面的对不对都抛出一个错误
} catch (e) {
alert(e);
}
 
 
4、AJAX例子:获取一个txt静态文件
 
window.onload = function() {
 
var oBtn = document.getElementById(‘btn‘);
 
 
oBtn.onclick = function() {
 
 
/*
1.创建一个ajax对象
ie6以下new ActiveXObject(‘Microsoft.XMLHTTP‘)
标准下:new XMLHttpRequest();
 
*/
 
 
 
//用if判断和用try catch一样
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}*/
 
var xhr = null;
 
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
 
/*
2、设置传输内容与方式
open方法
参数
1)提交方式
2)提交地址
3)是否异步
true 异步:非阻塞 前面的代码不会影响后面代码的执行
false 同步:阻塞 前面的代码会影响后面代码的执行
*/
 
xhr.open(‘get‘,‘1.txt‘,true);
 
//3、发送数据请求
xhr.send();
/*4、等待服务器返回内容
onreadystatechange : 当readyState改变的时候触发的事件
 
readyState : ajax工作状态,请求状态
0 (初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
 
返回的内容:
responseText : ajax请求返回的内容就以文本形式(string)存放到这个属性下面,
把后台所有的类型,包括数组和json的object类型在内 都转成string类型
 
responseXML:返回XML形式的内容
 
status : 服务器(请求资源)状态,http状态码:200成功,404找不到资源、500服务器端错误...
*/
 
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert(‘出错了,Err:‘ + xhr.status);
}
}
}
}
}
 
 
 
 
5、读取动态数据(get和post的语句写法区别):
 
1)get:
 
缓存问题,在不刷新页面的情况下缓存之前的文件,导致不异步刷新后台数据
解决:在url?后面连接一个随机数(时间戳)
 
乱码问题,在网页中中文乱码。
解决: 编码encodeURI
 
xhr.open(‘get‘,‘get.php?username=‘+encodeURI(‘刘伟‘)+‘&age=30&‘ + new Date().getTime(),true);
 
xhr.send();
 
 
2)post:
 
post没有缓存和乱码问题
 
在open和send之间设置请求头:setRequestHeader(类型, 内容);申明发送的数据类型
 
数据放在send()里面作为参数传递
 
xhr.open(‘post‘,‘2.post.php‘,true);
 
xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);
 
xhr.send(‘username=刘伟&age=30‘);
 
 
6、数据类型(返回数据的处理):
 
JSON方法
 
json中每个属性名都必须用双引号!!
 
1)JSON.stringify( ); 可以把一个对象转成对应字符串
 
2)JSON.parse( ); 可以把字符串转成对应json对象
 
 
7、AJAX获取新闻例子:
 
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
 
xhr.open(‘get‘,‘getNews.php‘,true);
xhr.send();
 
xhr.onreadystatechange = function() {
 
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
 
var data = JSON.parse( xhr.responseText );//将字符串转成json对象
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;
} else {
alert(‘出错了,Err:‘ + xhr.status);
}
}
 
}
 
 
···
 
getNews.php:
 
<?php
header(‘content-type:text/html;charset="utf-8"‘);
error_reporting(0);
 
$news = array(
array(‘title‘=>‘德国女总理默克尔滑雪时摔倒 骨盆断裂‘,‘date‘=>‘2014-1-6‘),
array(‘title‘=>‘中日驻英外交官撰文互称对方国家为"伏地魔"‘,‘date‘=>‘2014-1-6‘),
array(‘title‘=>‘安倍:望与中国领导人会面 中方:你关闭了大门‘,‘date‘=>‘2014-1-6‘),
array(‘title‘=>‘揭秘台湾驻港间谍网运作 湖北宜昌副市长被查‘,‘date‘=>‘2014-1-6‘),
array(‘title‘=>‘习JP:嫦娥三号是货真价实的中国创造‘,‘date‘=>‘2014-1-6‘),
);
 
echo json_encode($news);
 
···
 
8、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(response) {
var data = JSON.parse( response );
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);
 
 
···
 
 
 
9、AJAX跨域-JSONP
 
1)ajax跨域请求具有限制:
xhr.open(‘get‘, ‘http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1‘, true);

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

3)<script>标签

src的作用 : 加载(包含指定的外部文件) 
可以跨域包含 
被包含的资源可以是任何类型的文件(可以是txt,php等) 
他只关注被包含的文件的内容是否是合法的JS 
原理: 
定义函数 
包含外部文件,在被包含的文件中执行调用定义好的函数 
参数的(数据)的实现 
问题:包含就调用,通过动态创建<script>实现按需调用 
问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称 

4)用JSONP解决跨域问题:


JSONP : JSON with Padding

script标签

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

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

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


4、例子:

<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);//在之前的script标签后面追加

}

}
</script>


···

getData.php:

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

···

Ajax笔记-加强版

标签:utf-8   执行   资源文件   长度限制   else   append   加载   gettime   产生   

原文地址:http://www.cnblogs.com/hello-web/p/7221500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!