Ajax_使用 jQuery 实现Ajax

Posted 2021-01-09 猩生柯北

【jQuery中的Ajax】

1.jQuery对Ajax操作进行了封装，在jQuery中最底层的方法时 $.ajax()。第二层是 load() , $.get()  和 $.post()，第三层是 $.getScript() 和 $.getJSON()。

详情请查看jQurey的API。

 

【load()方法】

1.load()方法时jQuery中最简单和常用的Ajax方法，能载入远程的html代码并插入到DOM中，它的结构是：load（url [,data] [,callback]）

 

2.程序员只需要使用jQurey选择器为HTML片段指定目标位置，然后将要加载的文件的url作为参数传递给load()方法即可。

 

3.load()方法-----细节

（1）如果只需要加载目标ＨＴＭＬ页面内的某些元素，则可以通过ｌｏａｄ（）方法的ＵＲＬ参数来达到目的。通过ＵＲＬ参数指定选择符，就可以方便的从加载过来的ＨＴＭＬ文档中选出所需要的内容，ｌｏａｄ（）方法的ＵＲＬ参数的语法结构为“ｕｒｌ　ｓｅｌｅｃｔｏｒ”（注意：ｕｒｌ的选择器之间有一个空格）

（２）传递方式：ｌｏａｄ（）方法的传递参数根据参数ｄａｔａ来自动自定，如果没有参数传递，采用ＧＥＴ方式传递，否则采用ＰＯＳＴ方式。

（３）对于必须在加载完才能继续的操作，ｌａｏｄ（）方法提供了回调函数，该函数由三个参数：代表请求返回内容的ｄａｔａ；代表请求状态的ｔｅｘｔＳｔａｔｕｓ对象和ＸＭＬＨｔｔｐｏＲｅｑｕｅｓｔ对象。

 

【小结】

１.什么是Ａｊａｘ？

不用刷新页面，但可以和服务器通信的方式。使用Ａｊａｘ的主要方式是ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象。

 

２.使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象实现Ａｊａｘ［了解］。

 

３.Ａｊａｘ传输数据的３中方式：

１）ＸＭＬ：笨重，解析困难，但　ＸＭＬ　是通用的数据交换格式。

２）ＨＴＭＬ：不需要解析可以直接放到文档中，若仅更新一部分区域，但传输的数据不是很方便，且ＨＴＭＬ代码需要拼装完成。

３）ＪＳＯＮ：小巧，有面向对象的特征，且有很多第三方的ｊａｒ包可以把Ｊａｖａ对象或集合转为ＪＳＯＮ字符串。

 

４.使用ｊＱｕｅｒｙ完成Ａｊａｘ操作

１）ｌｏａｄ（）方法：可以用于ＨＴＭＬ文档的元素节点，把结果直接加为对应节点的子元素，通常而言，ｌｏａｄ（）方法加载完后数据是一个ＨＴＭＬ片段。

ｖａｒ　＄ｏｂｊ　＝　．．．
ｖａｒ　ｕｒｌ　＝　．．．

ｖａｒ　ａｒｇｓ　＝　｛ｋｅｙ：ｖａｌｕｅ，．．．｝

＄ｏｂｊ．ｌｏａｄ（ｕｒｌ，ａｒｇｓ）；

 

２）　＄．ｇｅｔ，＄．ｐｏｓｔ，＄．ｇｅｔＪＳＯＮ：更加灵活，出去使用ｌｏａｄ的方法情况，大部分时候都使用这三个方法。

 

Ｉ。基本使用

／／ｕｒｌ：Ａｊａｘ请求的目标ＵＲＬ

／／ａｒｇｓ：传递的参数：ＪＳＯＮ格式

／／ｄａｔａ：Ａｊａｘ响应成功后的数据，可能是ＸＭＬ，ＨＴＭＬ，ＪＳＯＮ

＄．ｇｅｔ（ｕｒｌ，ａｒｇｓ，ｆｕｎｃｔｉｏｎ（ｄａｔａ）｛

｝）

 

ＩＩ。请求ＪＳＯＮ数据

＄．ｇｅｔ（ｕｒｌ，ａｒｇｓ，ｆｕｎｃｔｉｏｎ（ｄａｔａ）｛

｝，＂ＪＳＯＮ＂）；

 

＄．ｐｏｓｔ（ｕｒｌ，ａｒｇｓ，ｆｕｎｃｔｉｏｎ（ｄａｔａ）｛

｝，＂ＪＳＯＮ＂）；

 

＄．ｇｅｔＪＳＯＮ（ｕｒｌ，ａｒｇｓ，ｆｕｎｃｔｉｏｎ（ｄａｔａ）｛

｝）