Ajax的运用

AJAX

原生js操作ajax

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();//ie5 ie6 xhr = new ActiveXObject(Microsoft.XMLHTTP")

2.打开链接

xhr.open(method,url,ansyn) method:(get/post) url:接口的路径 ansyn:是否是异步（默认异步true）

3.发送数据

xhr.send()

4.获取数据，渲染页面

xhr.onreadystatechange = function(){

if(xhr.status == 200 && xhr.readyState == 4){

//do something

}

属性

xhr.status 200 404 500

xhr.readyState 【0,1,2,3,4】

xhr.statusText ok not found

xhr.responseText

xhr.responseXML

post和get的不同点

JQUERY 操作ajax的方法

1.最底层：$.ajax({

type:"get/post",

url:"路径",

dataType:"xml/html/text/json/jsonp...",

data:{},

success:function(res,statusT,xhr){

返回的结果

error:function(){

}

})

$.ajax({url}).done(fn).fail(fn)

2.二层

$.get(url,[data],[fn],[dataType])

$.post(url,[data],[fn],[dataType])

jquery对象.load(url,[data],[fn])

3.最高层

$.getJSON(url,[data],[fn])

$.getSCRIPT(url,[fn])

接口:

http://datainfo.duapp.com/shopdata/datainfo.html

京东评论接口

https://club.jd.com/discussion/getProductPageImageCommentList.action?productId=1085328

典型的软件三层模型：

视图界面—数据处理—数据存储

传统软件架构下：后端语言直接操作界面，Ajax只是作为辅助的异步请求实现页面的局部刷新技术；传统前后端耦合软件模型中，Ajax是指作为一个辅助功能。

前后端分离软件架构模型中：后端语言只是提供接口【接口是URL地址的格式进行呈现的】

前端通过Ajax进行调用，访问URL接口地址，获取数据并且渲染到页面上。

http请求

超文本传输协议（HTTP，HyperText Transfer Protocol)

http是计算网络通信的规则

http是一种无状态的协议（不建立持久连接）

http请求的7个步骤

1.建立tcp连接(TCP（Transmission Control Protocol传输控制协议）)

2.web浏览器向web服务器发送请求命令

3.浏览器发送请求头

4.服务器应答

5.服务器发送应答头信息

6.服务发送数据

7.服务器断开tcp

当再浏览器地址栏键入http://www.baidu.com会发生什么情况

1.建立tcp链接

2.找域名对应的ip

o再浏览器内置缓存里面找

o再向上一级路由找

o再向上一级dns服务找

o在向。。。。。。。。

o找不到

3.向服务器发送请求头.请求体

4.服务会应答

5.服务器应答头

o服务器的信息

o状态码status：

§100初始化

§200成功

§300各种跳转（你去别的地方有）

§400各种找不到

§500服务器内部错误

§常见200 303 304 307 404 500 505

6.服务器发送数据

7.服务器关闭tcp

8.读取数据

9.解析成dom生成虚拟dom树

10.建立别的http请求下载css js图片其他文件

11.渲染页面

12.重绘页面

状态码：

1xx：信息响应类，表示接收到请求并且继续处理

2xx：处理成功响应类，表示动作被成功接收、理解和接受200 Ok

3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理

4xx：客户端错误，客户请求包含语法错误或者是不能正确执行404 NOT FOUNT

5xx：服务端错误，服务器不能正确执行一个正确的请求500

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。

200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201（已创建）请求成功且服务器已创建了新的资源。

202（已接受）服务器已接受了请求，但尚未对其进行处理。

203（非授权信息）服务器已成功处理了请求，但返回了可能来自另一来源的信息。

204（无内容）服务器成功处理了请求，但未返回任何内容。

205（重置内容）服务器成功处理了请求，但未返回任何内容。与204响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。

206（部分内容）服务器成功处理了部分GET请求。

300-3007表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。

300（多种选择）服务器根据请求可执行多种操作。服务器可根据请求者来选择一项操作，或提供操作列表供其选择。

301（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。您应使用此代码通知搜索引擎蜘蛛网页或网站已被永久移动到新位置。

302（临时移动）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。会自动将请求者转到不同的位置。但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎页面或网站已被移动。

303（查看其他位置）当请求者应对不同的位置进行单独的GET请求以检索响应时，服务器会返回此代码。对于除HEAD请求之外的所有请求，服务器会自动转到其他位置。

304（未修改）自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。

如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应。由于服务器可以告诉搜索引擎自从上次抓取后网页没有更改过，因此可节省带宽和开销。

305（使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。

307（临时重定向）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。会自动将请求者转到不同的位置。但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎某个页面或网站已被移动。

4XXHTTP状态码表示请求可能出错，会妨碍服务器的处理。

400（错误请求）服务器不理解请求的语法。

401（身份验证错误）此页要求授权。您可能不希望将此网页纳入索引。

403（禁止）服务器拒绝请求。

404（未找到）服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

405（方法禁用）禁用请求中指定的方法。

406（不接受）无法使用请求的内容特性响应请求的网页。

407（需要代理授权）此状态码与401类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。

408（请求超时）服务器等候请求时发生超时。

409（冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的PUT请求时可能会返回此代码，以及两个请求的差异列表。

410（已删除）请求的资源永久删除后，服务器返回此响应。该代码与404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时会用来替代404代码。如果资源已永久删除，您应当使用301指定资源的新位置。

411（需要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。

413（请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414（请求的URI过长）请求的URI（通常为网址）过长，服务器无法处理。

415（不支持的媒体类型）请求的格式不受请求页面的支持。

416（请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态码。

417（未满足期望值）服务器未满足"期望"请求标头字段的要求。

500至505表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500（服务器内部错误）服务器遇到错误，无法完成请求。

501（尚未实施）服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。

502（错误网关）服务器作为网关或代理，从上游服务器收到了无效的响应。

503（服务不可用）目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。

504（网关超时）服务器作为网关或代理，未及时从上游服务器接收请求。

505（HTTP版本不受支持）服务器不支持请求中所使用的HTTP协议版本。

http请求组成

1.请求方法get post等等

2.请求的url

3.请求头

4.请求体

get post区别

lget形式请求数据，参数会以明文的形式拼接在url地址的后面，请求的长度受到url地址格式的限制；

lpost形式请求数据，参数会打包到请求对象中进行传递，不会显示在url地址中。数据请求的安全性比较GET而言更加隐秘！

l什么时候用GET？什么时候用POST？

nget方式请求数据的效率相比POST方式较高！

n参数长度有一定的限制的情况下请求常规数据，使用get方式

n参数长度没有限制或者包含二进制数据或者包含安全要求的数据等，请求的数据涉及到安全性的情况下，使用Post方式

http响应的的组成

1.文字和数字组成的状态码，显示请求成功与否

2.响应头

3.响应体（正文）

搭建PHP服务器

·安装wampserver

·www文件夹就是网站内容所在区域

·本地ip：127.0.0.1

·本地域名:localhost

端口号默认80，如果apache无法运行，就要看一下是不是端口被占用了，在cmd—>netstat–ano

可以修改端口，还可以让占用80端口的应用解除端口

修改端口

Apache-àhttpd.confàListen 80

什么ajax

Ajax全称为：“Asynchronous[e'sɪŋkrənəs]JavaScript and XML”（异步JavaScript和XML），

它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

一．Ajax概述

Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是一串技术的集合，主要有：

1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；

2.XMLHttpRequest对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；

3.服务器上的文件，以XML、HTML或JSON格式保存文本数据；

4.其它JavaScript，解释来自服务器的数据（比如PHP从MySQL获取的数据）并将其呈现到页面上。

由于Ajax包含众多特性，优势与不足也非常明显。

优势主要以下几点：

1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；

2.用户体验极佳（不刷新页面即可获取可更新的数据）；

3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；

4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

而Ajax的不足由以下几点：

1.不同版本的浏览器度XMLHttpRequest对象支持度不足(比如IE5之前)；

2.前进、后退的功能被破坏（因为Ajax永远在当前页，不会几率前后页面）；

3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）；

4.开发调试工具缺乏（相对于其他语言的工具集来说，JS或Ajax调试开发少的可怜）。

异步是什么？

使用Ajax最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？

我们普通的Web程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web页面出现假死状态，所以，一般Ajax大部分采用异步模式。

l异步操作和同步操作

n同步操作：不同的事情按照一定的顺序进行执行，后一件事情必须等到前一个执行完成才能执行，否则会处于等待状态。

u通常情况下，同一个模块中的代码是按照程序结构顺序执行的，就是后一行代码必须等待前一行代码执行完成才能执行，否则处于阻塞状态。

n异步操作：不同的事情在执行过程中，同时执行。不分前后顺序

u在程序代码执行过程中，后一行代码不会等待前一行代码执行完成再去执行，而是直接执行，表现出不同行的代码同时执行的效果。

如何实现ajax呢？

1.运用html和css实现页面，表达信息

2.运用XMLHttpRequest和web服务器进行数据的异步交换

3.运用javascript操作DOM，实现动态局部刷新

l核心步骤：1.定义对象2.发送数据3.处理响应4.DOM渲染

创建一个XMLHttpRequest对象

XMLHttpRequest是AJAX的基础。

XMLHttpRequest对象用于和服务器交换数据。

所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1，创建XMLHttpRequest对象的语法

varxhr=newXMLHttpRequest();

所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。

老版本的Internet Explorer（IE5和IE6）使用ActiveX对象：

varxhr=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：

var xhr;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xhr=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

方法

描述

open(method,url,async)

规定请求的类型、URL以及是否异步处理请求。

·method：请求的类型；GET或POST

·url：文件在服务器上的位置

·async：true（异步默认）或false（同步）

send(string)

将请求发送到服务器。

·string：仅用于POST请求

2,打开链接open（method,url,asny);

xhr.open("GET/POST","url?params1=some¶ms2=somm2",true);

3,发送send（"params1=some¶ms2=somm2"）;可以为空post的时候可以再添加

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.send("name="+uname.value);//发送数据

// post请求需要发一个header

4,监听readyStatestatus

xhr.onreadystatechange=function(){//当XHR状态方式改变时

if(xhr.status==200&&xhr.readyState==4){//如果http的状态码200(请求成功) xhr的状态是4（成功状态）

console.log(xhr.responseText)

}

如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性

Request请求response响应

属性

描述

responseText

获得字符串形式的响应数据。如果来自服务器的响应并非XML，请使用responseText属性。

responseXML

获得XML形式的响应数据。如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性

XMLHttpRequest对象的三个重要的属性：

1，onreadystatchange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest的状态信息。

2.readyState存有XMLHttpRequest的状态。从0到4发生变化。

XMLHTTP的readyState值含义：

·0－未初始化，即尚未调用open。

·1－初始化，即尚未调用send。

·2－发送数据，即已经调用send。

·3－数据传送中。

·4－完成。

4.status状态码在前面已经说过

特别注意status == 200 ok

注意问题：

1.兼容性问题【XmlHttpRequest对象的兼容性】

2.状态码【readyState[0.1.2.3.4], status[200,402,403,404, 500]】

3.DOM操作【原生JS对于标签、样式、属性、内容的增删改查】

跨域：

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。

先来看看哪些情况下才存在跨域的问题：

编号

URL

说明

是否允许通信

http://www.a.com/a.js

http://www.a.com/b.js同一域名下

允许

http://www.a.com/lab/a.js

http://www.a.com/script/b.js同一域名下不同文件夹

允许

http://www.a.com:8000/a.js

http://www.a.com/b.js同一域名，不同端口

不允许

http://www.a.com/a.js

https://www.a.com/b.js同一域名，不同协议

不允许

http://www.a.com/a.js

http://70.32.92.74/b.js域名和域名对应ip

不允许

http://www.a.com/a.js

http://script.a.com/b.js主域相同，子域不同

不允许

http://www.a.com/a.js

http://a.com/b.js同一域名，不同二级域名（同上）

不允许（cookie这种情况下也不允许访问）

http://www.a.com/a.js

http://www.b.com/b.js不同域名

不允许

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

同源策略:

浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

为什么跨域?

为了让某些数据实现不同域名上的共享，以达到数据共用提高处理效率的目的，需要对部分数据进行跨域访问！

如何实现跨域?

1、JSONP：

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。(不支持post请求)

核心：通过script标签的src属性，进行域名的包装来完成跨域数据的访问。Src来模拟数据的来源，通过和要访问的服务器的域名一致，进行同源数据的访问，间接实现的跨域数据访问。

2、代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

3、PHP端修改header（XHR2方式）ie10以下版本不支持

在php接口脚本中加入以下两句即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

我们通常采用JSONP的方法来实现跨域.

json与jsonp的区别：

json是一种数据格式，jsonp是数据访问的方式

原生js跨域:原生js中,通过动态增加script标签,指定src属性进行数据的跨域访问.

面试题：

1.什么是同源策略.

2.简单说下原生js是怎么跨域的？

答题点：1）原生js通常使用jsonp进行跨域

2）jsonp跨域的操作过程

3.什么是jsonp，json与jsonp的区别

Jquery 方法

load()方法

jQuery对Ajax做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。

.load()方法可以参数三个参数：

load(参数1，参数2，参数3)

1，参数1：url必需的URL,规定希望加载的url地址

2，data可选，与请求一同发送的key/value数据，参数类型为Object、

3，callback可选，load方法完成后所执行的回调函数，参数类型为函数Function。

如果想让Ajax异步载入一段HTML内容，我们只需要一个HTML请求的url即可。

//HTML

//jQuery $('input').click(function() {

$('#box').load('test.html');

});

如果想对载入的HTML进行筛选，那么只要在url参数后面跟着一个选择器即可。

//带选择器的url $('input').click(function() {

$('#box').load('test.html .my');

});

如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那么我们就可以使用第二个可选参数data。向服务器提交数据有两种方式：get和post。

//不传递data，则默认get方式$('input').click(function() {

$('#box').load('test.php?url=qkt');

});

//get方式接受的PHP

if($_GET['url'] =='qkt') {

echo'前端学习官网';

}else{

echo'其他网站';

}

//传递data，则为post方式$('input').click(function() {

$('#box').load('test.php', { url :'qkt'

});

//post方式接受的PHP

if($_POST['url'] =='qkt') {

echo'前端学习官网';

}else{

echo'其他网站';

}

在Ajax数据载入完毕之后，就能执行回调函数callback，也就是第三个参数。

回调函数也可以传递三个可选参数：

responseText（请求返回的结果）=====> js responseText、

statusText（请求状态)======> js status（字符串success/error）、

xhr（XMLHttpRequest对象）=====> js XMLHttpRequest对象。

$('input').click(function() {

$('#box').load('test.php', { url :'qkt'

},function(response, status, xhr) {

alert('返回的值为：'+ response +'，状态为：'+ status +'，

状态是：'+ xhr.statusText);

});

注意：status得到的值，如果成功返回数据则为：success，否则为：error。

XMLHttpRequest对象属于JavaScript范畴，可以调用一些属性如下：

属性名说明

responseText作为响应主体被返回的文本

responseXML如果响应主体内容类型是"text/xml"或"application/xml"，

返回包含响应数据的XML DOM文档

status响应的HTTP状态

statusTextHTTP状态的说明

如果成功返回数据，那么xhr对象的statusText属性则返回'OK'字符串。除了'OK'的状态字符串，statusText属性还提供了一系列其他的值，如下：

HTTP状态码状态字符串说明

200OK服务器成功返回了页面

400Bad Request语法错误导致服务器不识别

401Unauthorized请求需要用户认证

404Not found指定的URL在服务器上找不到

500Internal Server Error服务器遇到意外错误，无法完成请求

503ServiceUnavailable由于服务器过载或维护导致无法完成请求

$.get()和$.post()

.load()方法是局部方法，因为他需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

GET---从指定的资源请求数据

POST---向指定的资源提交要处理的数据

GET基本上用于从服务器获的（取回）数据。注意：GET方法可能返回缓存的数据

POST也可以用于从服务器获取数据，不过POST方法不会缓存数据，并且常用于连同请求一起发送数据。

语法：

$.get(url,[data],[callback],[type])

url:必需待载入页面的URL地址

data:可选待发送 Key/value 参数。

callback:可选载入成功时回调函数。

type:可选返回内容格式，xml, html, script, json, text, _default。

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。

//使用$.get()异步返回html类型

$('input').click(function() {

$.get('test.php', { url :'qkt'

},function(response, status, xhr) {if(status =='success') {

$('#box').html(response);

}

})//type自动转为html

});

注意：第四参数type是指定异步返回的类型。一般情况下type参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：

1.GET请求是通过URL提交的，而POST请求则是HTTP消息实体提交的；

2.GET提交有大小限制（2KB），而POST方式不受限制；

3.GET方式会被缓存下来，可能有安全性问题，而POST没有这个问题；

4.GET方式通过$_GET[]获取，POST方式通过$_POST[]获取。

$.post语法

$.post(URL,data,callback);

必需的URL参数规定您希望请求的URL。

可选的data参数规定连同请求发送的数据。

可选的callback参数是请求成功后所执行的函数名。

//使用$.post()异步返回html

$.post('test.php', {

url :'qkt'

},function(response, status, xhr) { $('#box').html(response);

});

$.getScript()和$.getJSON()

jQuery提供了一组用于特定异步加载的方法：

$.getScript()，用于加载特定的JS文件；

$.getJSON()，用于专门加载JSON文件。

有时我们希望能够特定的情况再加载JS文件，而不是一开始把所有JS文件都加载了，

这时使用$.getScript()方法。

语法:

$.getScript(url,callback)

url参数为服务器的请求地址，

callback参数为数据请求成功后，执行的回调函数。

//点击按钮后再加载JS文件

$('input').click(function() { $.getScript('test.js');

});

$.getJSON()方法是专门用于加载JSON文件的，使用方法和之前的类似。

语法:

$.getJSON(url,[data],callback)专门用来加载json文件的

url参数为请求加载json格式文件的服务器地址，

可选项data参数为请求时发送的数据，

callback参数为数据请求成功后，执行的回调函数。

$('input').click(function() {

$.getJSON('test.json',function(response, status, xhr) { alert(response[0].url);

});

$.ajax()

$.ajax()是所有ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。JQuery封装的底层Ajax操作函数，更加侧重于定制化选项，让开发人员控制的细节方面更加精确。

语法:

$.ajax({name:value, name:value, ... })

这个方法只有一个参数，传递一个各个功能键值对的对象。

参数

类型

说明

url

String

发送请求的地址

type

String

请求方式：POST或GET，默认GET

timeout

Number

设置请求超时的时间（毫秒）

data

Object或String

发送到服务器的数据，键值对字符串或对象

dataType

String

返回的数据类型，比如html、xml、json等

beforeSend

Function

发送请求前可修改XMLHttpRequest对象的函数

complete

Function

请求完成后调用的回调函数

success

Function

请求成功后调用的回调函数

error

Function

请求失败时调用的回调函数

global

Boolean

默认为true，表示是否触发全局Ajax

cache

Boolean

设置浏览器缓存响应，默认为true。如果dataType类型为script或jsonp则为false。

Content

DOM

指定某个元素为与这个请求相关的所有回调函数的上下文。

contentType

String

指定请求内容的类型。默认为application/x-www-form-urlencoded。

async

Boolean

默认为Boolean是否异步处理。默认为true，false为同步处理

processData

true，

数据被处理为URL编码格式。如果为false，则阻止将传入的数据处理为URL编码的格式。

DataFilter

Function

用来筛选响应数据的回调函数。

IfModified

Boolean

默认为false，不进行头检测。如果为true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的。

Jsonp

String

指定一个查询参数名称来覆盖默认的jsonp回调参数名callback。

username

String

在HTTP认证请求中使用的用户名

password

String

在HTTP认证请求中使用的密码

scriptCharset

String

当远程和本地内容使用不同的字符集时，用来设置script和jsonp请求所使用的字符集。

xhr

Function

用来提供XHR实例自定义实现的回调函数

traditional

Boolean

默认为false，不使用传统风格的参数序列化。如为

$.ajax({

url:”http://.,.........”,

data:{

//参数

dataType:”GET/POST/JSONP/HTML/XML/JavaScript……”

success:function() {},

error:function() {}

})

商品列表$.getJSON/$.get

商品类型$.getJSON/$.get

商品详情$.getJSON/$.get

购物车$.post/$.get

订单数据$.post/$.get

订单支付$.post

最后编辑于：2017.12.08 03:31:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

Ajax的运用

推荐阅读更多精彩内容