Ajax+JSON

最新推荐文章于 2023-04-28 10:49:05 发布

回_憶

最新推荐文章于 2023-04-28 10:49:05 发布

阅读量3.1k

点赞数 1

分类专栏： JavaScript 文章标签： asynchronous Jackson-all ajax Ajax中使用this关键字 JSON

本文链接：https://blog.csdn.net/angjunqiang/article/details/41144819

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Ajax的主要运行原理

Ajax被认为是(Asynchronous Javascript and xml) 异步的js和xml通信，允许浏览器与服务器通信而不需刷新当前页面。主要用来实现不刷新整个页面便可以与服务器通信的方法。主要结构如下：

这种方式最大的好处就是在不刷新整个页面的基础上可以实现对某个局部页面进行刷新，且保证数据的同步。

JQuery中的Ajax使用方法：

<span style="font-size:14px;"> 1、$.post(url,args,function(data){
      //需要被执行的任务 
     })</span>

其中：url表示请求的目标URL ，args 表示传入到服务器的参数，一般为Json格式，data 表示从服务器返回的数据,一般为json格式。

<span style="font-size:14px;">2、$.getJSON(url,args,function(data){    
       //需要被执行的任务 
});</span>

<span style="font-size:14px;">3、$.ajax({
      type:" ",    //访问的方式有POST和GET两种。
     url: "  ",     //访问的url地址，即后台中的controller。
     dataType: " ",   //数据返回类型。这里一般有：json、text/javascript、html/javascript几个选项 
     data:"  ",     //需要传入的数据，这里需要是json格式的，在后台可以根据json键值对的key来接收
     success:function(data){  //这里的data为返回的数据
    },
    error:function(data){
   },
})</span>

在Ajax中关于this关键词使用的注意事项

1、在ajax中的回调函数中如果使用this或$(this)都是拿不到自己需要的对象。表现为undefine。这个地方是一个很容易出问题的bug点，具体原因也不清楚，如果那位大神知道请告知，谢谢！

2、如果我们想在ajax中的回调函数中使用this关键字的话，在发出ajax请求之前，提前定义关于this的变量obj，并赋值。这个就可以在回调函数中直接使用obj对象。

<span style="font-size:14px;">$('div').click(function(){
   var obj=$(this);
   $.ajax({
            url:'url',  //发送的地址
            type:'POST',  //请求的方式
            data:data，//要传入的数据
            dataType:'json', //返回的数据类型
            success:function(data){//成功后回调函数
                  //data表示返回的数据
                 obj..... //这里面可以直接使用this的对象obj
           }
    });
});</span>

Java中将对象转为json格式的工具

1、jackson-all.jar,standard.jar 包

用法：

<span style="font-size:14px;"><span style="font-size:14px;">ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString("对象");</span></span>

2、谷歌推出的 gson-2.2.2.jar包

<span style="font-size:14px;"><span style="font-size:14px;">Gson gson=new Gson();
String result=gson.toJson("对象");</span></span>

这里的对象可以是类、集合、map等，对于实体类来说，相应的属性一定要有set和get方法。

3、阿里推出的 fastjson

Ajax使用的场景

a.表单驱动的交互;
b.深层次的树的导航;
c.快速的用户与用户间的交流响应;
d.类似投票、yes/no等无关痛痒的场景;
e.对数据进行过滤和操纵相关数据的场景;
f.普通的文本输入提示和自动完成的场景。

Ajax不适应的场景

a.部分简单的表单
b.搜索
c.基本的导航
d.替换大量的文本
e.对呈现的操纵

Ajax的缺点

a.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
b.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
c.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
d.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
e.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
f.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
g.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。