本文共 3729 字，大约阅读时间需要 12 分钟。

ajax 学习笔记：

1.Ajax简介

AJAX=Asynchronoous JavaScript and XML (异步的JavaScript和xml )Ajax 是一种无需的重新的加载网页的情况下，能够更新部门网页的技术。Ajax是一种用于创建更好更快以及交互性更强的web应用程序技术。

传统的网页（不使用ajax技术的网页）先要提交和更新一个表单，都需要重新加载整个网页。

使用ajax技术的网页，通过在后台服务器进行了少量的数据交换，就能实现异步局部更新。

使用前端来伪造一个ajax，iframe 标签

ajax-frame.html 使用 iframe 测试    
       
   
    
    
请输入要加载的地址：
    
    
                    
   
   
    
    
加载页面位置：
    
    
   

使用ajax的模拟测试：注册百度账号

2.使用jQuery提供的AJAX 方法

2.1 纯js 和使用jQuery提供的比较

Ajax的核心【本质】是XMLHttpRequest对象（XHR)，XHR为向服务器发送请求和解析服务响应提供了接口，能够异步的方式从服务器获取数据。通过jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。

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 将自动替换 ? 为正确的函数名，以执行回调函数

2.2 简单测试HttpServletResponse处理

第一步：配置 application.yml

server:  port: 8080  servlet:    context-path: /ajaxspring:  mvc:    view:      prefix: classpath:/templates/      suffix: .html  thymeleaf:    prefix: classpath:/templates/    suffix: .html

补充：

配置一个跳转到视图的controller：IndexController    @Controllerpublic class indexController {
       @RequestMapping("index")    public String index() {
           return "index";    }}

第二部：编写一个AjaxController类

@Controllerpublic class AjaxController {
       @RequestMapping(value = "ajax1", produces = "application/json;charset=utf-8")    public void ajax1(String name, HttpServletResponse response) throws IOException {
           if ("admin".equals(name)) {
               response.getWriter().println("true");        } else {
               response.getWriter().println("false");        }    }}

第三步：编写前端的HTML页面

    
                   
   
    
        用户名: 
    
   

第四步：启动springboot,打开控制台：鼠标离开了输出框，就看到一个ajax请求

2.3 实体类User

第一步：在IndexController中配置跳转到html

@RequestMapping("hello")    public String hello() {
           return "hello";    }

第二步：在AjaxController 写获取集合对象，展示在前端

@RequestMapping(value = "ajax2")    @ResponseBody    public List
   
     ajax2() {
           List
    
      list = new ArrayList<>();        //创建一个list集合        list.add(new User("Lxx", "女", 20));        list.add(new User("JJ", "女", 20));        list.add(new User("Ryan", "男", 20));        return list;    }
    
   

第三步：写前端页面**：注意字符串的拼接**

    
               
   
    
        
    
             
      
                   
姓名
                   
性别
                   
年龄
              
             
     
             
        
   

第四步:启动springboot项目来访问

2.4注册效果

注册的时候如果用户名存在，提示一“ 此用户名太受欢迎了，请换个名字注册”

第一步：

@RequestMapping("reg")    public String reg() {
           return "reg";    }

第二步：

@RequestMapping(value = "ajax3")@ResponseBodypublic String ajax3(String name,String pwd) {
       String msg="";    //模拟数据库的数据    if(name!=null){
           if("Ryan".equals(name)){
               msg="此用户名太受欢迎了，请换个名字注册";        }else{
               msg="Ok";        }    }    return msg;}

第三部：

    
               
注册
   
    
     
    
    
    
    
    
    
    
    
    
   

第四步：上图

…

获取百度接口案例：

@RequestMapping("baidu")public String bd() {
       return "baidu";}

转载地址：http://hfcki.baihongyu.com/