AJAX请求和响应

AJAX请求和响应

本文总结AJAX请求和响应的相关经验

 

AJAXAsynchronous JavaScript and XML,异步JS和XML,即在不重载整个页面的情况下,AJAX通过后台加载数据,并在网页上展示。使用jQuery + AJAX可以使用简单的Java方法实现发送请求和接受响应,响应格式为JSON、HTML或XML的String。

 

1.       请求静态内容:$(selector).load(URL, data, callback(responseTxt, statusTxt, xhr));

 

URL

必需

请求的url

Data

可选

与请求一起发送的查询参数

Callback

可选

执行完成后的回调函数

responseTxt

可选

包含调用成功时的结果内容

statusTxt

可选

包含调用状态

xhr

可选

XMLHttpRequest对象

 

2.       GET/POST方法

GET方法:向指定的资源请求数据,基本上用于从服务器获得(取回)数据,可返回缓存数据。$.get(URL,callback());

POST方法:向指定的资源提交要处理的数据,不会返回缓存数据。$.post(URL,data,callback());

请求的data可以这么写:

{

Key1:”value1”,

Key2:”value2”,

……

KeyN:”valueN”

}

        

回调函数callback(data,status)中,data是返回的数据,status是网络响应状态。

 

3.       $.ajax方法

这个方法比前两个方法都好,都灵活,是jQuery封装的AJAX方法,一般AJAX底层需要定义一个XMLHttpRequest对象,通过这个对象的方法来进行AJAX请求和处理响应。但是$.ajax方法(以及前两个方法)可以把这个对象的操作封装起来,减少代码量。

几个注意的地方:

 

@ResponseBody的使用

用来标注Controller的某个方法,用来处理ajax请求,和@RequestMapping一起使用,@ResponseBody使这个方法返回后,Http请求不去找ModelView更新数据,而是直接把返回值作为响应发给$.ajax方法回调函数的参数。这个参数可以是Object,但最好是String类型,格式最好是Text,Html,XmlJSON的序列化字串,省去不必要的麻烦。、

 

脚本创建新元素(动态元素)的事件绑定

较新版本的jQuery不支持.live()!!!

较新版本的jQuery不支持.live()!!!

较新版本的jQuery不支持.live()!!!

W3SCHOOL上的教程没有更新,现在所有绑定未来元素的方法都建议使用.on(),而且!!!

在绑定动态元素的时候,元素选择器不能直接选择未来的元素id(或者类、名称),而是应该写成$(document).on(“事件”,$selector,function(){}),在编译的时候还没有这个元素呢,只能绑定他的祖先节点(其实绑定父节点也可以,不过还是按规定写吧)。这就好比,一个爸爸在还没有孩子的时候,他的哥们儿不能直接找到他还没出生的孩子说:叫我叔叔,而只能盯着这个爸爸,他啥时候有孩子了,让他的孩子叫叔叔。

 

响应中文乱码问题

总结一下AJAX的中文乱码问题。分为几种情况:

1.       前端页面显示结果的时候出现乱码(V端)

查看页面编码格式,这个问题一般不会出现,配置的时候就统一了。

2.       请求的过程中到C端,参数为乱码(4有一种相同情况,一定要看!

<!-- AJAX请求编码器 -->
<beanclass="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
   
<propertyname="messageConverters">
       
<list>
           
<beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
         
  <beanclass="org.springframework.http.converter.StringHttpMessageConverter">
               
<propertyname="supportedMediaTypes">
                   
<list>
                       
<value>text/plain;charset=UTF-8</value>
                   
</list>
               
</property>
           
</bean>
       
</list>
   
</property>
</
bean>

以及:

<filter>
   <filter-name>CharacterEncodingFilter</filter-name>
   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
   <async-supported>true</async-supported>
   <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
   </init-param>
   <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
   </init-param>
</filter>

加入相应配置文件即可。

3.       到数据库里变乱码/数据库提取出来乱码

数据库配置url后面加上:?useUnicode=true&characterEncoding=UTF-8

 

 

4.       C端响应到V端变乱码

如果你配置完前面3个,那么M-V-C-Db都统一成UTF-8了,但是还是乱码,有可能是因为你在传递参数的时候直接在IDE里写了一个中文参数,如:

$.post(url,{name:”张三”});

由于你编辑器自身的编码格式不是UTF-8,在存储、编译、运行的过程中这个字符串已经变成乱码了。解决方法就是把编辑器的编码格式改一下。实际开发过程中,基本不会使用到静态的中文字符串,有的也可以尽量改成英文的,都不会遇到这种问题。

 

如果!!!这样还不行,那你可以尝试吧这个静态字符串封装到另一个类里,比如封装到JSON或者XML里,序列化成字符串后返回到前端,前端再反序列化,得出来相应域的值就是正确的中文字串。

 

如果这样还不行,大兄弟,赶紧别纠结了,这不是考试,尝试一下别的方法吧。软件的构建过程很复杂,有可能在构建或者调试的某一时刻,你改了一下,就会有一部分是UTF-8,另一部分不是(这两部分之间的交互没有中文参数不会报错),而你的请求正好从这两部分中穿过,这个角落很有可能是永远找不到的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值