2022-09-12第七组薛雯匀

20220901上午

ajax：（它的一些功能：页面不跳还能发请求）

4种发送请求的方式：

1.地址栏

2.a标签

3.form表单

4.location.href或window.open()

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

异步：可以同时多个线程。整个页面不会全部刷新，只有某个局部在刷新

使用Ajax发送请求，页面是不可以通过后台跳页面！！！不能重定向

如果要跳也是通过JS跳，不能通过servlet跳转

ajax和form表单不能同时使用

ajax发起请求，后台给出的响应会回到ajax的响应处理函数中

//readyState:

//0: xhr被创建成功，open方法未调用

// 1： open被调用，建立的连接

//2： send被调用，可以获取状态行和响应头

//3: 可以拿到响应体，响应体加载中

//4: 响应体下载完成，可以直接使用responseText 可以理解为一切正常

//只要能找到后台一定能看到2,3,4

//<form action="">
<p>
账号：<input type="text" onblur="valid()">
</p>
//</form>
<script>
function valid(){
//向后台发请求
//使用ajax，JS原生的ajax
//XMLHttpRequest是ajax的支持对象,就是我们在前端要使用JS的话就用XMLHttpRequest
let xhr = new XMLHttpRequest();
//设置请求的方式和url地址
xhr.open("GET","valid.do");//前边是发请求的方法（get/post），后边是要发送到的地址；
//发请求
xhr.send(null);//因为GET请求没有请求体所有null
//指定xhr状态变化的处理函数
xhr.onreadstatechange = function(){
       if(this.readyState ===4){
       //通过xhr的responseText可以获取到对应的响应体
       cosole.log(this.responseText)
       }
}

}
</script>

9月1号下午

jQuery的ajax

账号：<input type="text" id="username">
<button id="validBtn">验证</button>
  <script src="static/js/jquery-1.9.1.js"></script>
  <script>
  $(function(){
     $("#validBtn").click(function){
       let username = $("#username").val();
       //发送ajax请求
       //1.发送get请求
       $.get("valid.do?username=" + username,function(date){
       //data就是后台回来的响应体
       if(data =="1"){
       $("#msg").html("用户名可用。。。")
       }
       if(data == "0") {
            $("#mag").html("用户名已存在。。。")
       }
       });
     });
  })
  //formData构建一个表单数据对象
  //formData是JS的内置对象，和JQuery无关，和Vue无关
  </script>

json串的格式：键值对

{"id":1001,"name":"zhangsan","stus":{aaa,bbb,ccc....}}

PrintWriter out = response.getWrite();

out.print(JSON.toJSONString(new Student(id:1001,name:"张三")))

、用Jason串必须要有set，get方法

用的时候需要指定：dataType:"json"

axios:对原生ajax的一个封装。

ES6语法。Promise语法。

<div></div>
<script src="static/js/vue.js"></script>
<script src="static/js/vue.js"></script>
<script>
const app = new Vue({
     el:"#app",
     data:{},
     methods:{
     get(){
     //发送post请求
     //axios.post("vue.do",{
    // "username":"xiaoqiang",
    // "password":"000000"
   //  },function(response){})
     
     //发送get请求
     axios.get("vue.do").then(function(response){
     
     });
     }
     },
})
</script>

axios发送get请求，请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。

axios发送post请求，

请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。

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

1.get请求，后台没有对应的对象来封装，不能有私密数据。

2.post请求，后台都是有对象跟着的。username，password-----User

id，name ,age,gender,email--------Student

封装对象的前提：

json串中的数据的key和对象的属性名要一致。实际上是根据set方法的名去封装的