Ajax笔记-加强版

Posted 2020-09-29 钢铁小坦克

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

···