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格式的字符串，解析成对应的数据结构