其他分享
首页 > 其他分享> > 2022-09-01 第二组刘禹彤 学习笔记

2022-09-01 第二组刘禹彤 学习笔记

作者:互联网

打卡44天

 

 

 

###学习内容

4种发送请求的方式

  1. 地址栏
  2. a标签
  3. form表单
  4. Lacation.href或window.open()

ajax

异步刷新(局部刷新),前端技术,给后台发送请求

注意

注意点1:

使用ajax发送请求,页面是不可以通过后台跳页面,如果需要跳页面,也是通过我们前端的JS来跳转

注意点2:

ajax和form表单不能同时使用

ajax:不跳页面

form:一定跳走

异步刷新

let xhr = new XMLHttpRequest();
//设置请求的方式和url地址
xhr.open("method(get/post)","服务器地址(xxx.do)")
//发请求
//只有post请求才有请求体
xhr.send(null/请求体)
//指定xhr的状态变化的处理函数
xhr.onreadystatechange = function(){
//正常接收后台的响应
//4代表一次请求响应执行完毕
  if(this.readyState ===4){
//通过xhr的responseText获取到对应的响应体
       console.log(this.responseText);
}
}

传参

   xhr.open("Get","valid.do?username="+username)
   xhr.send(null);
// 发送POST请求
        xhr.open("POST","valid.do");
        // POST请求需要设置一下请求头信息
        Content-type,发送的请求的内容的类型
        // application/x-www-form-urlencoded 文档流
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 发请求,并且设置请求体
        xhr.send("username=" + username + "&password=123456");

readyState响应码

  1. 0 xhr被创建成功,open方法未调用
  2. 1 open被调用,未建立连接
  3. 2 send被调用,可以获取状态行和响应头
  4. 3 可以拿到响应体,响应体加载中
  5. 4 响应体下载完成,可以直接使用responseText

JQery--ajax

发送ajax请求

$.get("url?参数" + 值,function(data){
//data就是后台回来的响应体
console.log(data);
})
$.post("valid.do","username=" + username,function (data) {}
 $.ajax({
                url: "valid.do",
                type: "post",
                data: formData,
                success : function(res) {
                    console.log(res);
                },
                error : function(res) {
                    console.log(res);
                }
            });

构建一个表单数据对象

formData是JS的内置对象,与JQery无关,与Vue无关

  let formData = new FormData();
            formData.append("username",username);
            formData.append("password",password);
$.ajax({
data: formData,})

json串

 $.ajax({
                url:"list.do",
                type : "get",
                dataType: "json",
                success:function(data) {
                    $.each(data.list,function(index,item) {
                        $("#info").append(
                            item.id + "---" + item.name + " <br> "
                        );
                    })

axios

请求

request.getParameter()方法只能接收默认的文档流中的参数,接不了json串

BufferedReader reader = request.getReader();
String line  = reader.readLine();
System.out.println(line);
1.get请求,后台没有对应的对象来封装,不能有私密数据
2.post请求,后台都是有对象跟着的——>username,password-------User
id,name,age,gender,email--------Student

###学习心得

今天学习了ajax,掌握的还可以,异步刷新也理解了原理

###掌握情况:一般

 

标签:username,01,请求,09,xhr,ajax,刘禹彤,post,data
来源: https://www.cnblogs.com/lyt0612/p/16647590.html