Jquery&ajax

二、GET 与与 POST
在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用
的过程中，GET 的使用频率要比 POST 高。
GET 请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，
可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。
xhr.open('get','diner/login?'+'name=Lee&age=100',true);
通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中
文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的
数据为 UTF-8。
//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
//判断的 url 是否有已有参数
url += (url.indexOf('?') == -1 ? '?' : '&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
当没有 encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现
错误导致无法获取。
POST 请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是
使用的 POST 传输方式。
xhr.open('post', 'diner/login', true);
而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法
向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的
处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type','application/x-www-form-urle
ncoded');
从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET
最多比 POST 快两倍。

三、封装 Ajax
因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是
POST；我们需要封装一个 Ajax 函数，来方便我们调用。
function ajax (obj) {
//创建对象
var xhr = new XMLHttpRequest();
//拿到 obj.data 进行转换，将对象拼接成字符串形式
obj.data = params(obj.data);
//若为 get 请求，拼接 url
if(obj.method == 'get'){
obj.url += (obj.url.indexOf("?")==-1) ? '?'+obj.data : '&'+obj.data;
}
//若 obj.async 参数为 true 则为异步，需要判断 readyState 状态
if(obj.async == true){
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
callback();
}
}
}
//打开请求
xhr.open(obj.method,obj.url,obj.async);
//发送请求
if(obj.method == 'get'){//若为 get 请求，send 传递 null 即可
xhr.send(null);
}else {//若为 post 请求，需先模拟表单提交，再 send，同时传递数据
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(obj.data);
}
//若 obj.async 参数为 false 则为同步
if(obj.async == false){
callback();
}
//封装好的回调函数

异步：

请求通过事件触发->服务器处理（这时浏览器仍然可以做其他事情）->处理
完毕。三心二意：同时可以做多件事情：左手按着空格键，右手可以不断的击
打鼠标，眼睛还要同时看着屏幕，很辛苦

Jquery 的的 ajax
1.$.ajax()
jquery 调用 ajax 方法：
格式：$.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
get 请求
$.ajax({
type:"get",
url:"../js/cuisine_area.json",
async:true,
success : function (msg) {
var str = msg;
console.log(str)
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>")
$('li').eq(i).text(msg.prices[i])
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText)
}
});
post 请求
$.ajax({
type:"post",
data:"name=tom",
url:"../js/cuisine_area.json",
contentType: "application/x-www-form-urlencoded",
async:true,
success : function (msg) {

2.请求 json 文件，传递参数，忽略返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.post('../js/cuisine_area.json',function(data){
console.log(data)
});
5.请求 json 文件,传递参数,拿到返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
4.$.getJSON()
表示请求返回的数据类型是 JSON 格式的 ajax 请求
5.jsonp
远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：
jsonp:’callback’
dataType:’jsonp’
$.ajax({
type:"post",
url:"http://iservice.itshsxt.com/restaurant/find",
dataType : 'jsonp',
jsonp:"callback",
success : function (msg,status) {
if(status == "success"){
var res = msg.result;
$('div').append("<ul></ul>");
for(var i=0; i<res.length;i++){
$('ul').append("<li></li>")
$('li').eq(i).text(res[i].name)
}
}else {
alert("请求失败,错误信息：" + msg);
}
},

error : function (errMsg,sta) {
console.log(errMsg.message)
}
});

猜你喜欢