首页  思维导图  详情



 



AJAX知识点

2021-04-15 17:09:48   0  举报





AJAX知识点

AJAX

模板推荐

作者其他创作

大纲/内容

简介

Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML

客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

Ajax能够做到局部刷新

可能遇到的问题

XMLHttpRequest解决中文乱码

发送数据给服务器的时候，JavaScript使用两次EncodeURI()

服务器得到数据，使用URLEncode.decode(数据,&quot;utf-8&quot;)进行解码

XMLHttpRequest解决缓存问题

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(&quot;If-Modified-Since&quot;,&quot;0&quot;)。2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(&quot;Cache-Control&quot;,&quot;no-cache&quot;)。3、在URL后面加上一个随机数： &quot;fresh=&quot; + Math.random();。4、在URL后面加上时间戳：&quot;nowtime=&quot; + new Date().getTime();。5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

XMLHttpRequest跨域访问

所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，【JSONP】在后端上配置可跨域【CORS方式】前端ajax请求的是本地接口，本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端【代理方式】

常见应用

二级联动

股票案例

图片验证码(如果验证码正确则显示正确的图片)

Jquery使用ajax

load()方法是使用Jquery的对象来进行调用的，得到服务器的结果自动会把结果嵌套到所在的标签中。get()方法不是使用Jquery对象来调用，因此需要手动把结果放在想要放的位置post()方法是用来把参数带过去给服务器的，因此我们需要在Servlet上手动设置编码。用法与get()方法一样serialize()是非常好用的一个方法，不需要我们手动去拼接参数，会自动把form表单的参数封装成JSON格式的数据。至于$.ajax()方法，实际上就是集合了get()和post()方法。

XMLHttpRequest

原理

浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器

服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上

创建对象

在IE和Firefox创建对象的方式是不一样的

MLHttpRequest对象的属性

onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数

readyState：请求状态readyState一改变，回调函数被调用，它有5个状态

0：未初始化

1：open方法成功调用以后

2：服务器已经应答客户端的请求

3：交互中。Http头信息已经接收，响应数据尚未接收

4：完成。数据接收完成

responseText：服务器返回的文本内容

responseXML：服务器返回的兼容DOM的XML内容

status：服务器返回的状态码

statusText：服务器返回状态码的文本信息

方法

open()(String method,String url,boolean asynch,String username,String password)send(content)setRequestHeader(String header,String value)getAllResponseHeaders()getResponseHeader(String header)abort()

open()：该方法创建http请求

第一个参数是指定提交方式(post、get)第二个参数是指定要提交的地址是哪第三个参数是指定是异步还是同步(true表示异步，false表示同步)第四和第五参数在http认证的时候会用到。是可选的

setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）。例子：xmlhttp.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);

send(content)：发送请求给服务器

如果是get方式，并不需要填写参数，或填写null

如果是post方式，把要提交的参数写上去

更多脑图和最新原创技术文章可关注公众号：Java3y