Ajax 笔记

Ajax

• 原生的js写法 xhr 异步请求

• jQuery封装好的 方法 $("#name").ajax("")

• Ajax的核心是XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据

• jQuery 提供多个与AJAX 有关的方法

• 通过jQuery AJAX方法，可以使用HTTP Get 和HTTP Post 从远程服务器上请求文本，HTML,XML 或JSON -同时可以把这些外部数据直接载入网页的被选元素中

• jQuery 不是生产者，而是大自然的搬运工

• jQuery Ajax 本质就是 XMLHttpResquest,对他进行了封装，方便调用！

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

  callback:回调函数

  学会读懂源码：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSlFJgDU-1643095315613)(C:\Users\22724\AppData\Roaming\Typora\typora-user-images\image-20220111092517506.png)]

HTML精通 + CSS略懂 + js(超级熟练)

js:

• 函数:闭包

• DOM

  • id , name , tagname
  • create , remove

• BOM

  • window
  • document

更新:ES6 : import require

初步实战(基于springboot项目框架-springboot项目框架在博客里有):

• 首先模拟构建底层数据

  pojo层:User.java

package com.na.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2022/1/11
 * @since 1.0.0
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

    private String name;
    private int age;
    private String sex;

}

controller层:AjaxController.java

package com.na.controller;

import com.na.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

/**
 * 〈一句话功能简述〉<br> 
 * 〈〉
 *
 * @author 22724
 * @create 2022/1/11
 * @since 1.0.0
 */
@RestController
public class AjaxController {

    @RequestMapping("/a2")
    public List<User> a2(){
        ArrayList<User> userList = new ArrayList<>();
        //添加数据
        userList.add(new User("lina",22,"女"));
        userList.add(new User("lina学前端",22,"男"));
        userList.add(new User("lina学全栈",22,"女"));

        return userList;
    }
}

此时运行效果:

我们发现,数据已经传输到页面了,而此时我们需要做的就是怎么将数据合理的展现在前端页面

• 其次,创建jsp页面