首页 > 其他分享> 文章详细

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

2022-09-01 19:32:55 阅读：228 来源： 互联网

标签：username 01 请求 09 xhr ajax 刘禹彤 post data

打卡44天

###学习内容

4种发送请求的方式

地址栏
a标签
form表单
Lacation.href或window.open（）

ajax

异步刷新（局部刷新），前端技术，给后台发送请求

注意

注意点1：

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

注意点2：

ajax和form表单不能同时使用

ajax：不跳页面

form：一定跳走

异步刷新

异步：整个页面不会全部刷新，只有某个局部在刷新
向后台发请求，使用ajax（JS原生的ajax）
ajax发出请求给后台，后台的响应会回到ajax的相应处理函数中
XMLHttpRequest是ajax的支持对象

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);
}
}

传参

get---------url地址栏拼接

   xhr.open("Get","valid.do?username="+username)
   xhr.send(null);

post

// 发送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响应码

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

JQery--ajax

发送ajax请求

发送get请求

$.get（"url?参数" + 值，function(data){
//data就是后台回来的响应体
console.log(data);
}）

发送post请求

$.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

构建一个表单数据对象

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

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

json串

返回对应数据类型------尤其针对数组和对象
json串的格式：键值对
dataType的默认值是字符串

 $.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

对原生ajax的一个封装
ES6语法

请求

axios发送get请求，请求中如果有参数，还是以一个默认的文档流形式发送，和之前的任何一种请求方式没有任何区别
axios发送post请求，请求中如果有参数，会把post请求中的请求体转成json串，然后再发送给后台

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

axios接收post请求-----从request中获取一个流，缓冲字符输入流

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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