ajax只有json流,ajax json

AJAX

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

AJAX负责客户端数据和服务端数据的运输。

AJAX：Asynchronous JavaScript and XML(异步JavaScript和XML) 所有操作在htdocs

Ajax的核心就是是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

家具的形态：

宜家(组装好的) -> 运输(拆成板) -> 家里(组装)

数据传输：

服务器(数据结构，数组、对象) -> 运行(特殊结构字符串) -> 客户端浏览器(数据结构，数组、对象)

市面上用的最多的字符串数据格式：

xml

特点：可以存储种类丰富的数据(自己设置标签)

缺点：解析起来比较困难

用于：大型的新闻网站 网易新闻 腾讯新闻 新浪微博 凤凰中文。

json(90%使用json)

特点：小，适用于一些小型的应用程序，解析起来比较简单

用于：移动端项目

javascript中的同步和异步：

同步：阻塞，必须等前面一个程序结束以后，才能进行后续的程序。

例子：很多人打热水，水龙头只有一个，必须排队。你必须等前面的人接完水以后，你才能去进行接水这个动作。

异步：非阻塞，前面一个程序是否执行完成，并不影响你程序的执行。

例子：很多人打热水，水龙头数量是无限。别人接水对我们来说是没有任何影响。

ajax实例

var oBtn = document.getElementById('btn1');

oBtn.onclick = function(){

var xmlhttp; //声明一个ajax对象

//做浏览器兼容，ie6及ie6一下，我们可以通过 new ActiveXObject('Microsoft.XMLHTTP');

if (window.XMLHttpRequest){

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

}else{

// IE6, IE5 浏览器执行代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //在地址栏输入地址

xmlhttp.send(); //提交 回车

/*

try catch方法创建ajax对象

var xmlhttp = null;

try{

xmlhttp = new XMLHttpRequest();

}catch(error){

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

console.log(error);

}

*/

}

open()

第一个参数： 请求方式 get / post

第二个参数：下载数据的地址

第三个参数：是否异步， 如果true，代表异步去执行ajax

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

同步：阻塞，前面代码的执行会影响到后面代码的执行

onreadystatechange事件 是在 readyState属性发生改变的时候触发

readyState属性:ajax工作状态

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

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

2 (载入完成)send方法完成，已经接受到全部响应内容

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

4 (完成) 响应内容解析完成，我们可以在客户端调用数据。

status: 服务器状态，HTTP状态码

200 : 交易成功

404 : 没有发现文件、查询或URl

responseText: 返回以文本形式存放的内容 ajax请求返回的内容就被存放在这个属性下面

responseXML: 返回以XML形式存放的内容 */

Ajax优缺点

优点：

最大的一点是页面无刷新，用户的体验非常好。

使用异步方式与服务器通信，具有更加迅速的响应能力。

可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点:

ajax不支持浏览器back按钮。

用AJAX做交互的时候,是通过js+xmlhttp来获取其他页面信息,对于浏览用户来说，是一个隐性的UE，感觉不到浏览器地址栏的URL的变化，对浏览器来说，地址栏的URL没发变化，产生不了HISTORY。虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。

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

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

破坏了程序的异常机制。

不容易调试。

一些手持设备(如手机、PDA等)现在还不能很好的支持ajax。

表单： 数据提交

action：数据提交的地址，默认是当前页面

method：数据提交的方式， get/post，默认是get方式

get

http://localhost/code/1.get.php?username=Tom&password=123456&age=18

特点:把数据名称和数据值用=链接，如果有多个的话把多个数据组成用&进行链接，然后把数据放在url?后面，传到指定的页面

缺点：

1、不安全

2、传递数据有限 2kb

post

配置参数 enctype：提交的数据的格式，默认 application/x-www-form-urlencoded

特点：浏览器内部进行提交

优点：

1、安全

2、理论上，可以传输的数据是无限的。

post方法，数据放在send(里面作为参数传递)

post没有缓存问题

post无需编码

ajax_GET

var oBtn = document.getElementById('btn1');

oBtn.onclick = function(){

//1、创建ajax对象

var xhr = null;

try{

xhr = new XMLHttpRequest();

}catch(error){

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

console.log(error);

}

//2.open

//如果url中有中文，可以通过encodeURI进行编码

//如果想忽略缓存，可以在url的后面链接时间戳

xhr.open('get', '1.get.php?username=' + encodeURI('钢铁侠') +'&password=123456&age=18&' + new Date().getTime(), true);

//3、send

xhr.send();

//4、接收数据

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

alert(xhr.responseText);

}else{

alert('出错了，Err:' + xhr.status);

}

}

}

ajax_post

var oBtn = document.getElementById('btn1');

oBtn.onclick = function(){

//1、创建ajax对象

var xhr = null;

try{

xhr = new XMLHttpRequest();

}catch(error){

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

console.log(error);

}

//2.open

xhr.open('post', '1.post.php', true);

//设置post请求的编码问题 设置在open方法的下面，send方法的前面

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //声明发送的数据类型

//3、send

//post方式，数据放在send里面作为参数进行传递

xhr.send('username=钢铁侠&password=123456&age=18');

//4、接收数据

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

alert(xhr.responseText);

}else{

alert('出错了，Err:' + xhr.status);

}

}

}

封装ajax 写在ajax.js中

function ajax(method, url, data, successFunc, errorFunc{

//1.创建ajax对象

var xhr = null;

try{

xhr = new XMLHttpRequest();

}catch(error){

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

console.log(error);

}

//2.open

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

url += "?" + data;

}

xhr.open(method, url, true);

//3.send

if(method == 'get'){

xhr.send();

}else{

//设置post请求的编码问题 设置在open方法的下面，send方法的前面

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //声明发送的数据类型

xhr.send(data);

}

//4.接收数据

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

if(successFunc){

successFunc(xhr.responseText)

}

}else{

if(errorFunc){

errorFunc('出错了，Err:' + xhr.status)

}

}

}

}

封装ajax.js调用

var getBtn = document.getElementById('getBtn');

var postBtn = document.getElementById('postBtn');

getBtn.onclick = function(){

ajax('get', '1.get.php', 'username=Tom&password=123456&age=18', function(data){

alert('get' + data);

}, function(error){

alert(error);

});

}

postBtn.onclick = function(){

ajax('post', '1.post.php', 'username=Tom&password=123456&age=18', function(data){

alert('post' + data);

}, function(error){

alert(error);

});

}

JSON 对象

//函数

//JSON.parse() json格式的字符串 -> 数据结构

//JSON.stringify() 数据结构 -> json格式的字符串

//(两种数据结构，数组和对象，用[]写就是数组，用{}写就是对象)

//alert(JSON); //object JSON

//数组->字符串

var arr = [10, 20, 'hello', true];

var str = JSON.stringify(arr);

alert(str); //[10,20,"hello",true]

//字符串->数组

var str = '[10,20,"hello",true]';

var arr = JSON.parse(str);

//alert(arr);

//alert(arr[2]);

//对象 -> 字符串

var xiaoming = {

name: '小明',

age: 18,

sex: '男'

}

//alert(xiaoming); //object Object

var str = JSON.stringify(xiaoming);

//alert(str); //{"name":"小明","age":18,"sex":"男"}

//字符串 -> 对象

var str = '{"name":"小明","age":18,"sex":"男"}';

var obj = JSON.parse(str);

//alert(obj.name);

//eval()

//JSON.parse() 和 JSON.stringify() 是ECMA5新增方法

//eval() 低版本浏览器解析JSON数据的函数 对于json数据的格式要求非常高，最外层必须是数组，里面的元素必须是对象

var str = '[{"name":"hello","age":18}]';

var obj = eval(str);

alert(obj[0].name);

两个实例ajax获取json

1、通过ajax下载数据

2、下载的数据一般情况下都是json格式的字符串

3、解析

//实例1：getList_ajax

var oBtn = document.getElementById('btn1');

oBtn.onclick = function(){

ajax('get', 'getList.php', null, function(data){

var obj = JSON.parse(data);

alert(obj.username);

}, function(error){

alert(error);

})

}

//实例2：getNews_ajax

var oBtn = document.getElementById('btn1');

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

oBtn.onclick = function(){

ajax('get', 'getNews.php', null, function(data){

var arr = JSON.parse(data);

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

//创建节点，添加数据

var oLi = document.createElement('li');

var oA = document.createElement('a');

oA.href = '#';

oA.innerHTML = arr[i].title;

var oSpan = document.createElement('span');

oSpan.innerHTML = '【' + arr[i].date + '】';

oLi.appendChild(oA);

oLi.appendChild(oSpan);

oUl.appendChild(oLi);

}

}, function(error){

alert(error);

})

}

Ajax中解析Json的两种方法详解

eval(); 不推荐

JSON.parse(); 推荐

两种方法的区别

我们先初始化一个json格式的对象：

var jsonDate = '{ "name":"周星驰","age":23 }'

var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法

var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法

然后在控制台调用：

console.log( jsonObj.name ); // 两种方法都可以正确输入 周星驰

那么问题来了 两种方法有什么区别呢？下面我们稍微把代码改动一下

var jsonDate = '{ "name":alert("hello"),"age":23 }'

var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法

console.log( jsonObj.age ); //会先执行“alert”输出“hello” 然后才输出 23

var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法

cosole.log( jsonobj.age ) // 报错 这个错误告诉我们这个字符串是不合法的

小结：

“eval();”方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的；而“JSON.parse();”方法的优点就不用多说了，推荐此方法。

注意：“eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串，也就是说只能解析字符串!!

前端提供给后台的只能是字符串数据格式，后台返回给前台的就看返回的是什么数据格式，是字符串就必须解析之后再用。

bejson.com

将下载到的json格式的字符串，解析成对应的数据结构