jquery中的ajax通讯原理

最新推荐文章于 2021-08-06 04:35:34 发布

Nolannk

最新推荐文章于 2021-08-06 04:35:34 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery ajax 通讯异步

本文链接：https://blog.csdn.net/joe_niu/article/details/78776604

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中Ajax通讯的基本原理，包括同源策略、Ajax请求过程以及jQuery对Ajax的封装，如$.ajax、$.post和$.getJSON。重点讨论了$.ajax的常用参数，并提出在大量数据处理时，如何利用jQuery Form插件简化操作。

摘要由CSDN通过智能技术生成

Ajax通讯原理

同源策略：要求动态内容只能阅读与之同源的那些Http应答和cookie而不能阅读来自非同源的内容

同源的三大策略：1.同协议 2.同域名/同ip 3.同端口

浏览器发起ajax请求的过程：1.找ip 2.没有找到对应的ip地址，就去互联网上的DNS上去找这台主机对应的ip地址 3.浏览器找到这台主机对应的ip地址后，就使用ip地址链接到web服务器 4.浏览器链接到web服务器后，就使用http协议发送请求，发送请求的过程，浏览器会向web服务器以steam()

http默认的是80端口

https默认的端口号是443

JQuery是对js代码进行封装方便我们前台代码的编写，解决了兼容性问题

Ajax的作用：是为了实现异步通讯，提高用户体验度

$.ajax 这个是JQuery对ajax封装的最基础步，这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作，但是参数较多

$.post,这个函数是对 ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小。采用post方式提交。只能是异步访问服务器。不能同步访问

为了满足用户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了无可比拟的作用，以前写Ajax操作，总是需要我们想JDBC代码一样进行几个必备的步骤：

而JQuery也对Ajax异步操作进行了封装，这里看一下几种常用的方式。 $，$ .post， $，$ .getJSON。

一， $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

var configObj = {

       method   //数据的提交方式：get和post

       url   //数据的提交路劲

       async   //是否支持异步刷新，默认是true

       data    //需要提交的数据

       dataType   //服务器返回数据的类型，例如xml,String,Json等

       success    //请求成功后的回调函数

       error   //请求失败后的回调函数

    }

$通过$ .ajax函数进行调用。

二， $，这个函数其实就是对$ .ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。例子不再介绍。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

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

        三， $，和$ .post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。这里不再演示。

        四， $.getJSON，这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]。

        其实会了$.ajax方法，其它的就都会使用了，都是一样的，其实非常简单。

        但是这里还有一个问题，比较麻烦，就是如果页面数据量比较大，该怎么办呢？在常规表单的处理中，我们使用框架Struts2可以通过域驱动模式进行自动获取封装，那么通过ajax,如何进行封装呢？这里JQuery有一个插件，Jquery Form，通过引入此js文件，我们可以模仿表单Form来支持Struts2的域驱动模式，进行自动数据的封装。用法和$.ajax类似，这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。