Ajax技术应用

Ajax是什么

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

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

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

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

Ajax请求响应过程分析（时序图解）

$传统方式是web请求与响应$客户端要等待响应结果$,$
$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方法内部，具体代码如下：

xhr.send("id=101&name=Computer&remark=Computer...");

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" 属性，如下：
<Connector port="80" protocol="HTTP/1.1"

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

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

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

第一步：创建项目Module；
第二步：添加Spring web依赖，代码如下：

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

第三步：创建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
待补充..