ajax最必要的参数,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();

}

//封装好的回调函数

function callback () {

if(xhr.status == 200) {

obj.success(xhr.responseText);

}else {

alert("请求错误，状态码:" + xhr.status + ",状态信息:" +

xhr.statusText);

}

}

}

//调用 ajax

ajax({

method:'post',

url :'js/cuisine_area.json',

async : false,

data : {

name:'tom',

age : 10

},

success : function (result) {

alert(result);

}

})

//参数转换方法

//params({name:'tom',age:100})

function params(data) {

var arr = [];

for (var d in data) {

//console.log(d);//键

//console.log(data[d])//值

arr.push(encodeURIComponent(d) + "=" +

encodeURIComponent(data[d]));//name=tom

}

return arr.join("&");//name=tom&age=100

}

封装 Ajax 并不是一开始就形成以上的形态，需要经过多次变化而成。

同步：

提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干

任何事。一心一意,当前只能做一件事，其他事情必须等当前的事情完成，才能

继续后面的事情。

异步：

请求通过事件触发->服务器处理(这时浏览器仍然可以做其他事情)->处理

完毕 。三心二意：同时可以做多件事情：左手按着空格键，右手可以不断的击

打鼠标，眼睛还要同时看着屏幕，很辛苦

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("

for(var i=0; i

$('ul').append("

")

$('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) {

var str = msg;

console.log(str)

$('div').append("

for(var i=0; i

$('ul').append("

")

$('li').eq(i).text(msg.prices[i])

}

},

error : function (errMsg) {

console.log(errMsg);

$('div').html(errMsg.responseText)

}

});

2.$.get()

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

1.请求 json 文件，忽略返回值

$.get('../js/cuisine_area.json');

2.请求 json 文件，传递参数，忽略返回值

$.get('../js/cuisine_area.json',{name:"tom",age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值

$.get('../js/cuisine_area.json',function(data){

console.log(data)

});

4.请求 json 文件,传递参数,拿到返回值

$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data)

});

3.$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

1.请求 json 文件，忽略返回值

$.post('../js/cuisine_area.json');

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("

for(var i=0; i

$('ul').append("

")

$('li').eq(i).text(res[i].name)

}

}else {

alert("请求失败,错误信息：" + msg);

}

},

error : function (errMsg,sta) {

console.log(errMsg.message)

}

});

标签：Jquery,function,obj,请求,json,xhr,ajax,data

来源： https://www.cnblogs.com/wangzhijing88/p/10760362.html