Ajax 学习

Posted 2021-03-08 gyhbk

Ajax 技术

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

jQuery（AJAX）

• jQuery 不是生产者，而是大自然搬运工。
• jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

jQuery.ajax(...)
       部分参数：
              url：请求地址
             type：请求方式，GET、POST（1.9.0之后用method）
          headers：请求头
             data：要发送的数据
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded;charset=UTF-8")
            async：是否异步
          timeout：设置请求超时时间（毫秒）
       beforeSend：发送请求前执行的函数(全局)
         complete：完成之后执行的回调函数(全局)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
         dataType：将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含javascript标签，则                   会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换                     为正确的函数名，以执行回调函数

1、配置web.xml 和 springmvc的配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
    <context:component-scan base-package="com.guo.controller"/>
    <mvc:default-servlet-handler />
    <mvc:annotation-driven />

    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

2、导入jquery ， 可以使用在线的CDN ， 也可以下载导入

<!-- 在线的CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 下载导入 -->
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

3、jQuery ajax

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
    function method(){
        $.post({
            url:"${pageContext.request.contextPath}/methods",
            type:"POST",
            dataType: "json",
            contentType:"application/json;charset=UTF-8",
            data:{'name':$("#name").val()},
            success:function (data) {
               console.log('success')
            }
        });
    }
</script>

@Controller
public class AjaxController {
      @responseBody
      @RequestMapping("/methods", method = RequestMethod.POST)
      public Map<String, String> ajax1(String name){
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("info", name);
        return map;
    }
}