jquery-Ajax原理实例讲解

1、文件的准备：

前端代码准备：

2、 前台页面：

3、test.php的资源:

4、 点击页面输出效果:

1、jquery的ajax的使用及封装：

jquery对ajax操作进行了封装，在jquery中：

$.ajax()方法属于最低层的方法；

第二层： load(); $.get(); $.post();===》使用频率高

第三层：$.getScript();  $.getJSON()方法

2、load();

能载入远程HTML代码并插入DOM中。

语法结构：

load(url[,data][,callback])

参数解释:

url: 类型string ==》请求HTML页面的URL地址;

data:发送至服务器的key/value数据；

callback:请求完成时的回调函数，无论请求成功或者失败；

代码测试:

1.准备前台页面：load.html

3、 load.html页面输出为：

4、2.准备被load调用的html页面：loadtest.html

5、 loadtest.html页面输出为:

6、3.在load.html页面点击时加载输出状况为：此时把loadtest.html的页面加载过来了，方法为load();方法；

7、load()===>筛选载入的HTML文档;上面时整个loadtest的页面;以下是加载页面的某些元素；可以通过URL参数来达到目的；

load()方法的URL参数的语法结构："url  selector" ;注意URL 与选择器之间有一个空格；

代码如下：

8、 页面点击输出效果:

9、load()的传递方式：

load()的传递方式根据参数data来自动指定；诺没有参数传递则采用GET方式传递;反之则会自动转换为post方式；

回调参数： load()的回调函数有3个参数,分别代表

请求返回的内容， 请求状态  和 XMLHttpRequest对象；

在load（）方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就会触发.....

测试代码如下：

10、 输出查看的结果:

11、最终：

12、点击输出:

13、以上load()的方法通常是用来从Web服务器上获取静态的数据文件;然而并不能体现ajax的价值；

如果需要传递一些参数给服务器中的页面:

经常用到的是$.get()  或者 $.post()  或者是$.ajax()；

$.get(),$.post()是jquery的全局函数；

1.$.get()方法:

       $.get（）方法使用GET方式来进行异步请求。

语法结构:

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

参数详解:

url==>string 请求的HTML页的URL地址;

data==>object   ,可选,发送至服务器的key/value数据会作为QueryString附加到请求的URL中

callback==>Function  可选，载入成功时回调函数，只有当Response的返回状态是success才调用该方法，自动将请求结果和状态传递该方法；

type==>string,服务器端返回内容的格式，包括XML  HTML  script   json  text  和default；

测试代码如下:

html

14、 get方法的使用：

15、 页面输出效果: