一、Ajax简介
概念
Ajax (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言。Ajax作用
允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页。
异步获取数据，即是数据交互(通过ajax获取某一文本文件的内容)。Ajax核心
Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR)。使用的场景
a.在百度中进行关键字搜索，会提示相关的所有内容
b.在账号注册的时候，其中某一项会直接提示错误
二、Ajax操作
- 创建对象XMLHttpRequest()
- open()方法
- send()
- request.onreadystatechange = function(){}
// 1、打开浏览器
// 创建一个ajax对象 ( ie6以下new ActiveXObject(‘Microsoft.XMLHTTP’) )
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、在地址栏输入地址
/*open方法
参数一: 打开方法 get/post
参数二: 请求地址
参数三: 是否异步 (true异步: 非阻塞 / false同步: 阻塞)
*/
request.open('get', '00-test.txt', true);
// 3、提交请求(回车)
request.send();
// 4、等待服务器返回内容
/**
responseText: ajax请求返回的数据即存放在该属性下(都为字符串):
readyState属性: 请求状态
0: (初始化)还没有调用open()方法
1: (载入)已调用send()方法，正在放请求
2: (载入完成)send()方法完成，已收到全部响应内容
3: (解析)正在解析响应
4: (完成)响应内容解析完成，可以在客户端调用
on readystate change: 当readyState改变的时触发
status: 服务器状态，http状态码
1字开头: 消息类
2字开头: 成功类
3字开头: 重定向类
4字开头: 请求错误类
5字开头: 服务器错误类
*/
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
// 请求到数据，显示
var oP = document.createElement('p');
document.body.appendChild(oP);
oP.innerHTML = request.responseText;
} else {
alert('错误了');
}
}
}
三、同步、异步
- 同步：小店吃饭，小店老板厨师都是一个人
程序中：如果程序在下载数据，UI界面就无法响应；
- 异步：饭堂吃饭，收银台，打饭的，厨师，各自互不影响
程序中：异步下载数据和UI界面两个线程；
四、HTTP协议
HTTP协议：
HTTP是一个属于应用层的面向对象的网络协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统。
HTTP协议的主要特点有: Client/Server模式， Brower/Server模式
1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式, 必须先请求才能得到响应， 服务器不能通过http协议直接发送数据给客户端
2, 简单快速, 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
3, 灵活, 传输数据类型种类多
4, 无连接, 请求一次服务器后立刻断开连接, 即非长连接 即短连接
5, 无状态, HTTP协议对事务处理没有记忆能力; 【会话技术cookie、session】
HTTP协议的请求方式: get/post/options/head/put/delete/trace/connect/patch，但通常都是get和post，即常说的使用http的get或post请求。
HTTP包含: 请求头和请求体
- GET请求
在Ajax使用的过程中，GET的使用频率又要比POST高得多. GET请求最常用于向服务器获取数据, 也可以将少量字符串参数提交给服务器。
get请求：在请求URL后面以 ? 的形式跟上发给服务器的参数，多个参数之间用&隔开。
get请求地址:
http://193.112.122.210/study/login_get.php
参数说明:
user 用户名
password 密码
例如:
http://193.112.122.210/study/login_get.php?user=qingbuyaodianwo&password=123321
注：由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能通常不能超过1KB
- POST请求
POST请求可以包含非常多的数据, 我们在使用表单提交的时候, 很多就是使用的POST传输方式。发给服务器的参数全部放在请求体(URL中看不到)中。
POST请求向服务器发送的数据, 不会跟在URL后面, 而是通过send()方法向服务器提交数据。
xhr.send('user =Zhang& password=123321');
POST请求和Web表单提交不同, 需要使用XHR来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
post请求地址:
http://193.112.122.210/study/login_post.php
参数说明:
user 用户名
password 密码
var request = null;
try{
request = new XMLHttpRequest();
} catch(e) {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('post', ' http://193.112.122.210/study/login_post.php', true);
// 请求头,传输的数据类型(post默认是没有设置的)
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 请求参数
request.send('user=EndEvent& password=123321');
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
alert(request.responseText);
} else {
alert('获取数据失败');
}
}
};
注: post传递的数据量没有显示，这具体还得看服务器的处理能力。
注: 从性能上来讲POST请求比GET请求消耗更多一些, 用相同数据比较, GET比 POST快. 这也是我们GET请求的使用率大于POST的原因。
五、JOSN数据解析
JSON.parse()将一个符合JSON语法的字符串解析成一个对应类型的值或对象。
// 转为JSON对象
var dataSource = JSON.parse(request.responseText);
例如:
http://193.112.122.210/json/JSON1.json
在线解析:
http://json.cn
http://tool.oschina.net/codeformat/json
六、jQuery-Ajax
- $.ajax()
执行一个异步的HTTP（Ajax）的请求。
/*
* 文档注释
* type: HTTP的请求方式（get或post）， 默认是get
* url: 接口， 必需
* data: 参数（需要提交给服务器的数据）
* async: 是否异步， 默认是true
* success: 表示请求成功之后的响应
* error: 表示请求失败之后的响应
*/
$(document).on('click', function(){
$.ajax({
type:"get",
url:"http://193.112.122.210/study/login_get.php",
data: {'user':'qingbuyaodianwo', 'password':'123321'},
async:true,
success: function(data){
console.log(data)
},
error: function(err){
console.log(err)
}
});
})
- $.get()
使用一个HTTP GET请求从服务器加载数据。
语法:
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
url: 请求地址
data: 发送给服务器的字符串或Key/value键值对
success(data, textStatus, jqXHR): 当请求成功后执行的回调函数
dataType: 从服务器返回的预期的数据类型。默认：智能判断（xml, json, script, or html）
$.get("http://193.112.122.210/json/JSON2.json", function(data){
// console.log(data)
var arr = JSON.parse(data)
})
注: http://193.112.122.210/json/JSON1.json
注: http://193.112.122.210/json/JSON2.json
注: 带参数时，可以拼接到url后面，也可以设置data对象。
jQuery中封装的get请求快捷方式。
- $.post()
使用一个HTTP POST 请求从服务器加载数据。
语法:
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
url: 请求地址
data: 发送给服务器的字符串或Key/value键值对
success(data, textStatus, jqXHR): 当请求成功后执行的回调函数
dataType: 从服务器返回的预期的数据类型。默认：智能判断（xml, json, script, or html）
$.post("http://193.112.122.210/study/login_post.php", {"user":"zhangsan","password":"123321"}, function(data){
//console.log(data)
console.log("post")
})
jQuery中封装的post请求快捷方式。
七、实际案例
- 蘑菇街商品列表效果
默认第1页: http://193.112.122.210/study/getData.php
带参数page页码: http://193.112.122.210/study/getData.php?page=1
带参数page页码: http://193.112.122.210/study/getData.php?page=2
操作步骤:
1、基本HTML(模拟页面显示)
2、添加CSS样式
3、通过ajax动态获取数据
4、JSON数据解析
5、DOM操作(渲染到页面中)