05、JSON与AJAX基础

Ajax

什么是Ajax？([ˈeɪdʒæks])

Ajax的全称是 Asynchronous JavaScript and XML（即异步的JavaScript和XML），它并不是一种新的编程语言，而是几种原有技术的结合体。

 

Ajax有什么用？

Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

 

Ajax的优点

1、通过异步模式，提升了用户体验。

2、优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。

3、Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

 

Ajax的缺点

1、不支持浏览器back按钮。

2、安全问题Ajax暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

 

 

XMLHttpRequest对象

什么是XMLHttpRequest？

是一种支持异步请求的技术，它是Ajax的核心。

 

XMLHttpRequest的作用

1、可以向服务器提出请求并处理响应，而不阻塞用户。

2、可以在页面加载以后进行页面的局部更新。

 

如何使用Ajax？

要完整实现一个Ajax异步调用和局部刷新，通常需要以下几个步骤：

1、创建XMLHttpRequest对象，也就是创建一个异步调用对象

2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL

3、设置响应HTTP请求状态变化的函数

4、发送HTTP请求

5、获取异步调用返回的数据

6、使用Javascript和DOM  实现局部刷新

如：

1、创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest) {
//主流浏览器、IE7+
xmlhttp = new XMLHttpRequest;
} else {
//IE6/IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//console.log(xmlhttp);

 

2、创建一个新的HTTP请求

xmlhttp.open( "post" , "./server.php" , true );

 

open(method,url,async)           //创建HTTP请求，规定请求的类型、URL以及 是否为异步处理请求

method：请求类型，GET或POST

//与post相比，get更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用post请求：
1、无法使用缓存文件（更新服务器上的文件或数据库）
2、向服务器发送大量数据（post没有数据量限制）
3、发送包含未知字符的用户输入时，post比get更稳定也更可靠。

url：文件在服务器上的位置

//url是open()方法的一个必选参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt、.xml等，或者服务器脚本文件：.asp、.php（在传回响应之前，能够在服务器上执行任务）等等。

async：true（异步）或false（同步）

//同步：提交请求  ->  等待服务器处理  ->  处理完毕返回  （整个期间浏览器不能干任何事）

//异步：请求通过时间触发  ->  服务器处理（这时浏览器可以做做任何事情） ->  处理完毕

注：open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送，只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。

 

3、设置响应  HTTP请求状态变化  的函数

//onreadystatechange 在 readystatechange 属性发生改变时触发
xmlhttp.onreadystatechange = function(){
//当readyState等于4，表示异步调用成功。
// 0，还用send方法（即没初始化）
// 1，已经用了send方法，正在发生请求
// 2、send方法已经执行完成
// 3、正在 解析响应的内容
// 4、解析响应内容 完成，可以在客户端调用
if(xmlhttp.readyState === 4){

//status >= 200 表示异步调用成功
// 100、客户端需要继续发送请求
// 404、表示页面找不到
// ===304、表示近期请求成功过，而且请求内容没有发生改变，还在浏览器缓存中，可以直接使用
if( (xmlhttp.status >=200 && xmlhttp.status <300) || xmlhttp.status === 304){

//异步调用成功后，在这里可以调用那个.php文件的内容

//这里填写第5步的代码（获取异步调用返回的数据）

}
}
}

 

4、发送HTTP请求

send(null);

send(string)      //将请求发送到服务器

参数说明：string仅用于post请求

注：仅在post请求时可以传入参数，不需要则发送null，在调用send方法之后，请求被发往服务器

 

//在get情况下传递参数，可以在open创建请求时，添加到url地址栏后面（如：./server.php?username=zhangsan&password=123）

//在post情况下传递参数，在send发送请求时，xmlhttp.send( { username:"zhangsan" , password:"123″ } );

 

在post情况下传递参数，必须要设置HTTP头部信息

setRequest(header , value);    //设置HTTP头部信息，需要两个参数

xmlhttp.setRequest("Content-type" , "application/x-www-form-urlencoded");    //一般我们可以直接写死

 

5、获取异步调用返回的数据

console.log(xmlhttp.responseText);     //在控制台打印出返回的数据（字符串的形式）

 

//在收到响应后相应数据会填充到xmlhttp对象的属性，有四个相关属性会被填充：

responseText：从服务器进程返回数据的字符串形式（比较常用）

 responseXML：从服务器进程返回的DOM兼容的文档数据对象

      status：从服务器返回的数字代码，如404(未找到)和200(已就绪)

 status Text：伴随状态吗的字符串信息

 

6、使用Javascript和DOM  实现局部刷新

var data = JSON.parse(xmlhttp.reponseText);     //第五步代码

xuanren();      //第六步代码
 

function xuanran(){         //这个函数可以放到最外层

$('p').text(data.xx);     //将p标签的内容换成data的xx属性

}

 

JSON对象的两个方法：

parse()

语法：JSON.parse()

功能：用于将JSON字符串转化成对象

stringify()

语法：JSON.stringify()

功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原

注：JavaScript原生的eval()类似于JSON.parse()方法，可以将json字符串转换为json对象，但是eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用

 

 

JSON

什么是JSON？

JSON(javascript object natation)，全称是JavaScript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据（2001年Douglas Crockford提出，目的是取代繁琐笨重的XML格式）

 

JSON语法规则

JSON的语法可以表示以下三种类型的值：

1、简单值：

简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null

字符串必须使用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用NaN和Infinity

注：JSON不支持JavaScript中的特殊值undefined

2、对象：

对象作为一种复杂数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值

JSON中对象的键名必须放在双引号里面，因为JSON不是JavaScript语句，所以没有末尾的分号

注：同一个对象中不能出现两个同名属性

3、数组：

数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值

注：数组或对象最后一个成员的后面，不能加逗号

 

jQuery AJAX 方法

$.ajax({
url: "", //请求地址
type: "", //请求方式
async: true, //异步或同步
dataType: "json", //数据格式
success: function(huidiao) { //请求成功的回调（huidiao表示从服务器返回来的数据）
xuanran(huidiao); //渲染数据
}
})

function xuanran(huidiao) { //这个函数可以写到最外层
//$.each()可以用来遍历对象
$.each(huidiao, function(index, obj) { //index表示huidiao里面的每个键，obj表示huidiao里面的每个值
console.log(index + "：" + obj); //打印出每个键值对
})
}

 

//JavaScript原生方法也可以进行$.ajax()的封装，如：

var $ = {
ajax: function(options) {
//…
}
}

 

$.ajax()

$.get()

$.post()

$.getJson()

 

跨域（js实现）

同源策略：域名、协议、端口均相同。

 

跨域：从一个域名的网页去请求另外一个域名的资源，严格一点的定义就是，非同源策略（域名、协议、端口有一个不相同），就被当作是跨域。

 

跨域的实现方法：

1、跨域资源共享（CORS）

2、使用JSONP（常用）

3、修改document.domain

4、使用window.name

 

JSONP：JSON with Padding（填充式json）的简写，是应用JSON的一种新方法，也是一种跨域解决方案。

 

JSONP由两部分组成：回调函数和数据。

//回调函数是当响应到来时应该在页面中调用的函数

//数据就是传入回调函数中的JSONP数据

如：abc( [{user:1},{id:9}] )      //abc表示回调函数，括号里面为json数据

 

JSONP原理

//直接用XMLHttpRequest请求不同域上的数据时，是不行的。

//但是在页面上引入不同域上的js脚本文件确是可以的，JSONP就是利用这个特性来实现的。

通过script标签引入js文件   -->   js文件载入成功后   -->   执行我们在url参数中指定的函数

 

跨域封装

//封装JSONP

function getJSONP(url,callback){   //callback为回调函数
if(!url) return;         //如果url不存在直接退出
//code....
}

//发送给服务器的时候，url地址后面必须跟着 回调函数名。如：

http://www.baidu.com?call=abc     //发送给服务器的数据里面为abc，那么回调函数就叫abc

//call可以随意命名，因为目的是把abc填充到call里面，服务器接收到call只会提取里面的abc，而不会在意call叫什么。

http://www.baidu.com?id=6&call=abc     //若url的?后面带有数据，则需要在最后面添加&call=abc

//服务器返回的时候

abc( [{user:1},{id:9}])      //abc为回调函数，里面为json数据

 

 

//随机生成回调函数名

//声明数组，用来生成随机函数名
var a = ['a','b','c','d','e','f','g','h','i','j'],
r1 = Math.floor(Math.random()*10),
r2 = Math.floor(Math.random()*10),
r3 = Math.floor(Math.random()*10),
name = a[r1]+a[r2]+a[r3],
cbname = 'getJSONP.'+name;

 

//把生成的回调函数名，塞到url地址中

//判断url地址中是否含有?号
if(url.indexOf('?') === -1)
url += '?jsonp='+cbname;
else
url += '&jsonp='+cbname;

 

//动态创建script标签

var script = document.createElement('script');

//定义script的src属性

script.src = url;

//把生成的script塞到head里面去

document.getElementByTagName("head")[0].appendChild(script);

 

//定义被脚本执行的回调函数（就是接收服务器返回的数据的函数）

getJSONP[name] = function(data){   //接收的data表示服务器端返回的json数据
//当name为变量的时候一定要用方括号，如果用.的话，name就成了死的字符串

try{
    callback && callback(data);    //跨域成功后，如果有回调函数，尝试执行。这个函数就是调用getJSONP的时候 的参数
}catch(e){
    //code...
}finally{
    //最后删除该函数及script标签
    delete getJSONP[name];
    script.parentNode.removeChild(script);
}

}

 

//合并起来后

function getJSONP(url,callback){   //callback为回调函数
if(!url) return;         //如果url不存在直接退出

//声明数组，用来生成随机函数名
var a = ['a','b','c','d','e','f','g','h','i','j'],
r1 = Math.floor(Math.random()*10),
r2 = Math.floor(Math.random()*10),
r3 = Math.floor(Math.random()*10),
name = a[r1]+a[r2]+a[r3],
cbname = 'getJSONP.'+name;

//判断url地址中是否含有?号
if(url.indexOf('?') === -1)
url += '?jsonp='+cbname;
else
url += '&jsonp='+cbname;

//动态创建script标签
var script = document.createElement('script');

//把生成的script塞到head里面去
document.getElementByTagName("head")[0].appendChild(script);

//定义被脚本执行的回调函数（就是接收服务器返回的数据的函数）
getJSONP[name] = function(data){ 
try{
    callback && callback(data);    //跨域成功后，如果有回调函数，尝试执行。这个函数就是调用getJSONP的时候 的参数
}catch(e){
    //code...
}finally{
    //最后删除该函数及script标签
    delete getJSONP[name];
    script.parentNode.removeChild(script);
}
}

}

 

 

//调用getJSONP

getJSONP( "http://www.baidu.com" ,function(data){

//在访问url地址后（跨域后），要做的事
//这个函数就会被getJSONP接收，上面表示为callback

console.log(data);  //如果能打印出data表示，跨域成功

});

 

jquery的跨域解决方案

jquery中的$.ajax()是如何实现跨域的？

jquery事如何做到在url后加?callback来实现跨域的？

posted @ 2020-03-14 12:43  JaydenQiu  阅读(140)  评论(0)    收藏  举报