Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。

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

第一．【.load()方法】

参数的使用step by step（load 有三个（URL +data+callback） +  type ）

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

 //HTML   展示的页面（我们可见的部分）

<input type="button" value="异步获取数据"/>

<div id="box"></div>
//jQuery

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

{

$('#box').load('test.html'); // test.html 是一个url路径 此时仅仅是载入数据

});
 //test.html 内容

<html>

<head>

<body>

    <div>

  <span>我是异步加载数据时需要的内容，我在另一个界面</span>

     </div>

</body>

</head>

</html>

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

（2.1）不传递 data，则默认 get 方式.

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

{

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

 })

//get方式接受的服务器端

(2.2)传递 data 用来在服务器端做判断

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

{

$('#box').load('test.php',

{

url:'www.www'

});

});

//post 方式接受的 服务器端

注：test.php 是和服务器端交互的路径，可更加自己的要求配置。

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

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

responseText（请求返回）、

textStatus（请求状态)、

XMLHttpRequest （XMLHttpRequest 对象）。

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

{ $('#box').load('test.php（和服务器交互的路径）',

{

url:'www.www'

},function(response,status,xhr)//回调函数

{

alert('返回的值为：'+response+'，状态为：'+status +'， 状态是：'+xhr.statusText);//用于调试查看，在页面上打印出来

 });

});

总结：：：总结：.load()方法有三个参数：：url,data,callback

Ajax Step By Step1的更多相关文章

  1. Ajax Step By Step5

    第五．[表单序列化] Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传 输到服务器端.如果使用 Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提 ...

  2. Ajax Step By Step4

    第四,[$.ajax()] $.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax() ...

  3. Ajax Step By Step3

    第三[．$.getScript()和$.getJSON()] jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件: $.getJSON(),用于专门 ...

  4. Ajax Step By Step2

    第二．[$.get()和$.post()方法] .load()方法是局部方法(有需要父$),因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指 ...

  5. 关于ajax技术

    传统注册存在的弊端 : 当我们点击注册时,会存在以下几个问题. 首先,浏览器会销毁当前页面,如果注册失败返回的新页面所有之前 填写的数据丢失. 其次,如果网络通信较差,我们表单提交请求数据到服务端,而 ...

  6. 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  7. Promise & Deferred Objects in JavaScript Pt.2: in Practice

    原文:http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt2-practical-use Intr ...

  8. MATLAB曲面插值及交叉验证

    在离散数据的基础上补插连续函数,使得这条连续曲线通过全部给定的离散数据点.插值是离散函数逼近的重要方法,利用它可通过函数在有限个点处的取值状况,估算出函数在其他点处的近似值.曲面插值是对三维数据进行离 ...

  9. Python2.7.6标准库内建函数

        Built-in Functions     abs() divmod() input() open() staticmethod() all() enumerate() int() ord( ...

随机推荐

  1. Android使用ViewPager做轮播

    ViewPager.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 ...

  2. Elasticsearch升级1.5版本暴露jdk的bug

    把测试环境的Elasticsearch升级到1.5.1版本,启动的时候报错: [root@node2 elasticsearch-1.5.1]# bin/service/elasticsearch s ...

  3. Net分布式系统之三：Keepalived+LVS+Nginx负载均衡之高可用

    上一篇写了nginx负载均衡,此篇实现高可用(HA).系统整体设计是采用Nginx做负载均衡,若出现Nginx单机故障,则导致整个系统无法正常运行.针对系统架构设计的高可用要求,我们需要解决Nginx ...

  4. 第二章Java基础之标识符

  5. iOS UIButton setTitle与setAttributedTitle

    今天遇到一个问题,查了好久,终于解决. 我需要根据不同的条件给uibutton赋不同的值,由于字体要求有不同颜色变化,所以我选择了一个条件下用setTitle,另一个条件下用setAttributed ...

  6. .net core 安装失败 的问题彻底解决

    解决方法: 已经整理好包:   https://pan.baidu.com/s/1dFuU80p 下载解压运行: DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.e ...

  7. 【简易版】Java ArrayList（增删改查）

    1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: (1)动态的增加和减少元素 (2)实现了ICollectio ...

  8. shell获取ip

    ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr:"

  9. 转发（forward）和重定向（sendRedirect）

    一. RequestDispatche 是一个Web资源的包装器,可以用来把当前的Request传递给该资源,或者把新的资源包括到当前的相应中.详细来说:RequestDispatch对象从客户端获取 ...

  10. inline（内联）函数

    1,为小操作定义一个函数的好处是:     a.可读性会强很多.     b.改变一个局部化的实现比更改一个应用中的300个出现要容易得多     c.函数可以被重用,不必为其他的应用重写代码     ...