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. 在sql server中利用with as实现递归功能

    在sqlserver2005之前,要实现递归功能比较麻烦,比如可能会要用到临时表与while语句来循环.自sqlserver2005之后,新增了with as功能语法,即 公用表达式(CTE),让递归 ...

  2. lua创建文件和文件夹

    创建文件夹: os.execute('mkdir xx') 创建文件: f = assert(io.open('a.tmp','w')) f:write('test') f:close()

  3. Struts2 的 值栈和ActionContext

    1.ValueStack 和 ActionContext 的关系与区别: -- 相同点:它们都是在一次HTTP请求的范围内使用的,它们的生命周期都是一次请求 -- 不同点:ValueStack 分为对 ...

  4. php中$row=mysql_fetch_row()出错问题

    在写php时用到这样一个问题,代码如下: $sql="select * from sina"; mysql_connect("localhost"," ...

  5. c++继承概念

    蠢了3年了,在找工作的今天明白了何为继承……呵呵呵…… 3种继承方式:public.protected.private. 注意几点: 1.继承只能继承基类的public和protected成员 2.3 ...

  6. AOP (Aspect-OrientedProgramming)面向切面编程

    AOP OOP 面向对象编程 适合自上向下,却不适合自左向右 AOP把软件系统分为两个部分:核心关注点和横切关注点.业务处理的主要流程是核心关注点,与之关系不大的部分是横切关注点. 横切关注点的一个特 ...

  7. sql查询当天,一周,一个月数据的语句

    --查询当天:  select * from info where DateDiff(dd,datetime,getdate())=0 --查询24小时内的: select * from info w ...

  8. 一、javase学习:数据库操作练习

    package JDBC_TEST; import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLExcept ...

  9. ubuntu14.04安装bodhi桌面系统后,unity启动界面改变,如何还原

    按一下 ctrl + alt + f1 # 出現 tty11. sudo service lxdm stop或sudo /etc/init.d/lxdm stop如果出現錯誤訊息 不理它 繼續2. s ...

  10. websocket实例(显示文件导入处理进度)

    大批量数据导入时,需要即时显示对文件的处理进度.考虑ajax轮询太浪费资源,使用websocket实现. 项目使用Spring MVC(3.1),与websocket结合要求版本4.0以上.所以没有使 ...