jQuery学习笔记——使用jQuery处理Ajax
一、HTTP协议
HTTP协议（HyperText Transfer Protocol)：超文本传输协议，协议就是一种约定，一种规范，规定了浏览器和服务器之间互相通信的一种规则，所有的WWW文件都必须遵守这个规则，约定就是请求（浏览器向服务器通信）和响应（服务器根据请求进行处理，返回给浏览器的结果）
请求报文：包括请求行、请求头、空行、请求体
请求行：post/get/put(请求方式) 、ie=utf-8(请求地址)、HTTP/1.1(HTTP的版本号)
请求头：Host:www.baidu.com(主机地址)、 cookie 、Content-Type(请求的格式）...
请求体：只是针对pos（get直接通过地址栏进行传输），例如：username=zhangsan&&pwe=1223
响应报文：包括响应行、响应头、空行、响应体
响应行：HTTP/1.1(版本号) 200(状态码) ok
响应头：Content-Type(响应的格式)：text/html；charset=uft-8(编码方式) Content-length:2048(响应文件的大小)
响应体(纯文本、html、json)：
哈哈
状态码：404找不到服务器资源
403:被禁止
401：没权限
500：服务错误
200：响应成功
HTTP协议GET和POST区别
1.缓存
get:能被缓存
post:不能缓存
2.编码类型
get:application/x-www-form-urlencoded
post:application/x-www-form-urlencoded或multipart/form-data，二进制数据使用多重编码
3.历史
get:参数保留在浏览器历史中
post：参数不会保存在浏览器历史中
4.数据大小
get方式有数据大小要求，不超过2kb
post方式无数据大小的要求
5.对数据类型的限制
get:只允许ASCII字符
post:没有限制，也允许二进制数据
6.安全性
get方式：安全性低，对于敏感数据，不建议使用get方式
post方式：安全性较高
7.可见性
get:数据在URL中对所有人都是可见的
post:数据不会显示在URL中
二、Ajax
1.简介
Asynchronous JavaScript and XML （异步的 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
用js通过http协议向服务器发送xml数据，目前json数据比较流行
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复
在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面
-
不用刷新整个页面便可与服务器通讯的办法：
Flash
Java applet
框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面
隐藏的iframe
XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词
-
Ajax优缺点
优点：
Ajax使用Javascript技术向服务器发送异步请求
Ajax无须刷新整个页面
因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高
缺点:
AJAX并不适合所有场景，很多时候还是要使用同步交互
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题(IE5,IE6)
-
创建XMLHttpRequest对象
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象 其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象 XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。 -
原生创建Ajax的代码
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick=function(){
// 1.创建XMLHttpRequest对象
// 考虑ie浏览器的兼容性问题
if(window.XMLHttpRequest){
// ie7以上，火狐，谷歌，苹果，欧朋
var oAjax = new XMLHttpRequest();
}else{
// ie6,ie5
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.对发送请求进行初始化，调用open方法
// open("请求方式","请求地址"，"同步(false)异步(true)")
oAjax.open("GET","服务器地址",true);
// 3.发送请求
oAjax.send();
// 4.为XMLHttpRequest添加OnReadystatechange事件
// 当服务器信息返回过来的时候调用,每个请求状态码都会触发这个事件
oAjax.onreadystatechange=function(){
// onreadystatechange与服务器发生交互时触发这个事件
// 可以根据状态码确定服务器有没有发送过来内容
/**
* readystate：表示Ajax请求的当前状态，告诉我们浏览器和服务器进行到哪一步了
* 0：初始化
* 1：服务器已经建立连接
* 2.请求已被接受（执行完send方法了）
* 3：请求处理中
* 4：请求完成，响应就绪了
*/
// 5.判断有没有发送完成
if(oAjax.readyState == 4){
// 6.判断是否响应完成
/**
* state：状态码
* 404 没找到页面(not found)
* 403 禁止访问(forbidden)
* 500 内部服务器出错(internal service error)
* 200 一切正常(ok)
* 304 没有被修改(not modified)
*/
if(oAjax.status == 200){
// 7.打印响应内容
// responseText 属性包含了从服务器发送的数据,当 readyState 属性值变成 4 时, responseText 属性才可用
alert("请求响应成功："+oAjax.responseText);
}else{
alert("请求失败："+oAjax.status);
}
}
}
}
}
</script>
<body>
<button id="btn1">提取内容</button>
</body>
三、使用jQuery处理Ajax
1.$.ajax() 方法
格式 :$.ajax({})
参数(以键值对的方式存在)： type:请求方式get/post
url:请求地址
data:请求是发送给服务器的数据
dataType:预期服务器返回的数据类型
async:是否是异步，如果是false就是同步，true是同步，默认为异步
contentType:设置请求头
success:请求成功后调用此函数
error:请求失败后调用此函数
实例（访问静态数据）：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.12.4.js" ></script>
<script>
/**
* jQuery调用ajax方法 常用方法
* 格式 :$.ajax({})
* 参数(以键值对的方式存在)：
* type:请求方式get/post
* url:请求地址
* data:请求是发送给服务器的数据
* dataType:预期服务器返回的数据类型
* async:是否是异步，如果是false就是同步，true是同步，默认为异步
* contentType:设置请求头
* success:请求成功后调用此函数
* error:请求失败后调用此函数
*/
$(function(){
$("#btn1").click(function(){
$.ajax({
type:"get",
url:"data.txt",
data:{
// 请求的数据，json对象
// 如果没有请求参数，不需要添加
username:"zhangsan"
},
// 预期返回的数据类型，在接受服务器返回值的时候会自动封装成json类型的，前提是返回的格式必须是json类型的
dataType:"json",
// 请求成功以后调用回调函数
// 此处data是一个形参，代表的是服务响应过来的数据
success:function(data){
//console.log(data);
var $ul = $("
");
// 遍历返回的数据数组
for (var i = 0; i < data.length; i++) {
// 得到数组中的每一个元素
var user = data[i];
// 创建li,把每个元素的Username添加到li里面
var li = ""+user.userName+" ";
// 把li添加到ul中
$ul.append(li);
}
// 将Ul添加到body里
$("body").append($ul);
}
})
})
})
</script>
</head>
<body>
<button id="btn1">
获取值
</button>
</body>
2.$.get() 方法
格式：
$.get(URL,callback);
URL必需参数，路径 callback可选参数，请求成功后所执行的函数名
实例（访问静态数据）：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
/**
* $.get("请求地址","请求参数列表","回调函数","预计服务器返回的数据格式")
*/
$("#btn1").click(function(){
$.get("js/data.txt",{},function(data){
var $ul = $("
");
// 遍历返回的数据数组
for (var i = 0; i < data.length; i++) {
// 得到数组中的每一个元素
var user = data[i];
// 创建li,把每个元素的Username添加到li里面
var li = ""+user.userName+" ";
// 把li添加到ul中
$ul.append(li);
}
// 将Ul添加到body里
$("body").append($ul);
},"json")
})
})
</script>
</head>
<body>
<button id="btn1">get</button>
</body>
3.$.post() 方法
语法格式
$.post(URL,data,callback);
data可选参数，连同请求发送的数据