Ajax技术应用

Ajax是什么

Ajax是一种web应用技术,可以借助就客户端脚本与服务端应用进行异步通讯(可以有多个线程同时与服务器交互),获取服务端数据以后,可以根据需求(按需)进行局部刷新。进而提高数据的响应和渲染速度。

Ajax技术最大的优势:底层异步,局部按需刷新,应用场景:

  • 商品系统。
  • 评价系统。
  • 地图系统。


Ajax技术最大的劣势:不能直接进行跨域访问,可以通过在对应的方法上添加@CrossOrigin注解描述让其间接地支持跨域访问

Ajax请求响应过程分析(时序图解)

Ajax方式的请求与响应\(关键是客户端不阻塞\)

Ajax入门代码分析及实现

Ajax编码的步骤?
重点是Ajax技术的入口-XMLHttpRequest-XHR对象
第一步:基于dom事件创建XHR对象

var xhr=new XMLHttpRequest();

第二步:在XHR对象上注册状态监听(监听客户端与服务端的通讯过程)

xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
           console.log(xhr.responseText)
    }
}

第三步:与服务端建立连接(指定请求方式,请求url,同步还是异步)

xhr.open("GET",url,true);

第四步:发送请求(将请求数据传递服务端)

xhr.send(null);

Ajax技术在JS中的代码实现注意事项总结

1.在使用"GET"和"Delete"发送请求时,方法内部是不需要传数据或者写一个null,具体代码如下:

xhr.send(null);

2.在使用"Post"和"Put"发送请求时,需要将数据写入到send方法内部,具体代码如下:

3.在使用"Post"和"Put"向服务端传递数据时,需要设置请求头,必须在open之后,代码如下:

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.获取请求参数时出现中文乱码问题:
在获取中文的请求参数时,可能会出现乱码问题(和请求方式、tomcat服务器版本有关),具体可以分为以下三种情况:
(1)如果请求是GET提交,并且tomcat是8.0及以后的版本,GET提交的中文参数,在获取时不会出现乱码问题!(8.0以后的to mcat包括8.0在获取GET提交的中文参数时,已经处理中文乱码问题。)

(2)如果请求是POST提交,不管是哪个版本的tomcat服务器,在获取中文参数时,都会出现乱码问题。因为tomcat底层在接收POST提交的参数时,默认会使用iso8859-1编码接收,而这个编码中没有中文字符,所以在接收中文参数时,一定会出现中文乱码问题!
解决方法是:通知服务器在接收POST提交的参数时,使用utf-8编码来接收!
代码实现:
request.setCharacterEncoding("utf-8");
注意:这行代码不会影响GET提交,只对POST提交有效!

这行代码要放在任何获取参数的代码之前执行!
(3)如果请求是GET提交,并且tomcat是7.0及以前的版本,GET提交的中文参数,在获取时会出现乱码问题!
解决方法:在[tomcat安装目录]/ conf/server.xml文件的(修改端口的)Connector标签上,添加一个 URIEncoding="utf-8" 属性,如下:

 connectionTimeout="20000"
       redirectPort="8443"
       URIEncoding="utf-8" />

同时在[Eclipse]/Servers/[当前tomcat服务器对应的配置目录]/server.xml文件中,在Connector标签上,添加一个 URIEncoding="utf-8" 属性,同上!

SpringBoot 项目Ajax技术应用入门分析

第一步:创建项目Module;
第二步:添加Spring web依赖,代码如下:


   org.springframework.boot
   spring-boot-starter-web

第三步:创建AjaxController处理客户端请求,代码如下:

package com.cy.pj.ajax.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
    @RequestMapping("/doAjaxStart")
    public String doAjaxStart(){
        return "Response Result Of Ajax Get Request 01 ";
    }
}

第四步:在项目中static目录下,创建一个页面ajax-01.html,代码如下:

springboot中的Ajax技术应用及代码实现

业务描述
在项目中static目录下,创建一个页面ajax-01
待补充..

你可能感兴趣的