AJAX入门这一篇就够了(三)

简介: 讲解

XMLHttpRequest解决中文乱码


在传统的Web中我们已经解决过中文乱码问题了。

  • 服务器传送给浏览器数据发生乱码:response设置编码的时候和浏览器页面的编码一致便可以解决
  • 浏览器传送给服务器数据发生乱码:如果是post方式,request设置编码便可以解决。如果是get方式,Tomcat下,使用ISO8859-1编码得到原本的二进制数组,再使用UTF-8编码便可以解决

接下来,要介绍的是:我们可以屏蔽任何浏览器和任何服务器的编码格式,浏览器发送给服务器的数据不造成乱码问题!

具体我们是这样做的:

  • 发送数据给服务器的时候,JavaScript使用两次EncodeURI()
  • 服务器得到数据,使用URLEncode.decode(数据,"utf-8")进行解码

为啥我能说这种方式屏蔽任何浏览器和服务器的编码格式,都不会乱码呢??

16.jpg


XMLHttpRequest解决缓存问题


在传统的Web中我们也解决过缓存的问题,通过设置response的头信息,返回给浏览器就可以实现不缓存页面了。

但是呢,现在我们使用XMLHttpRequest,拿到的不是全新的页面,仅仅是服务器端发送过来的数据!!

那我们要怎么解决缓存的问题呢??产生缓存的原因就是:我们请求了同一个地址,做了相同的操作。服务端认为我的操作并没有什么变化,就直接把缓存的信息给我了。这样的话,我就不能更换验证码图片了(等等应用)。

我们可以这样做:

  • 在每次请求url中加入一个时间戳参数【每次url就不一样了】
  • 加入时间戳参数到url时,也分两种情况
  • url本身就带有参数了,也就是说有"?"号了,那么添加时间戳的时候就需要用"&"号
  • url没有参数,直接使用"?"号来添加时间戳

if(url.indexOf("?")>=0){

   url=url+"&t="+(newDate()).valueOf();

   }else{

   url=url+"?t="+(newDate()).valueOf();

   }



XMLHttpRequest跨域访问


使用XMLHttpRequest去跨域访问是会出现错误的


17.jpg

我们要怎么解决呢??这时候就要用代理思想了

  • XMLHttpRequest先把请求提交给同域的Servlet处理
  • 同域Servlet再将XMLHttpRequest的请求提交给跨域的服务器
  • 同域Servlet得到跨域服务器的返回值,再返回给XMLHttpRequest

18.png

这个时候,XMLHttpRequest跨域访问就分两种(GET和POST)情况了,因为这两种提交数据的方式是不一样的!


浏览器代码


  • 我们需要在调用open方法之前判断一下要连接的地址是不是以http开头的,如果是则认为要访问的是跨域的资源
  • 首先将当前url中的”?”变成”&”,这是因为将要连接的地址改为”Proxy?url=” + url以后,如果原来url地址中有参数的话,新的url地址中就会有两个“?”这会导致服务器端解析参数错误,”url=”之后的内容表示本来要访问的跨域资源的地址。


目录
相关文章
|
6月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
52 0
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
591 0
|
6月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
161 1
|
3月前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
6月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
58 1
|
6月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
46 1
|
6月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
80 1
|
6月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
52 0
|
JSON JavaScript 前端开发
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
58 0
|
前端开发 JavaScript API
AJAX-day01-AJAX入门
AJAX-day01-AJAX入门