Ajax学习笔记

AJAX

1. 概念
   1. 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
   2. 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
   1. 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
1. ASynchronous JavaScript And XML 异步的JavaScript 和 XML
2. 异步和同步：客户端和服务器端相互通信的基础上
3. Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
4. 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
5. 提升用户的体验

 

2. 实现方式
   1. 原生的JS实现方式（了解）
   2. JQeury实现方式
      1. $.ajax()
         1. 语法： $.ajax({键值对});  
            ajax实现方式一

            //定义方法
                function  fun() {
                    // 使用 $.ajax({键值对}) 发送异步请求
                    $.ajax({
                        //（还有更多的参数，参考文档，以下几个较为重要）
                        url:"ajaxServlet",//请求路径
                        type:"POST",//请求方式
                        // data:"username=jack&age=23",//请求参数，两种写法
                        data:{"username":"jack","age":23},
            
                        error:function(){
                            alert("出错啦");
                        },//如果请求响应出错，会执行的回调函数
                        
                        dataType:"text",//设置接收到的响应数据的格式
            
                        success:function (data) {
                            alert(data);
                        } //响应成功后的回调函数
                    })
                }

      2. $.get()：发送get请求
             1.语法： $.get(url, [data], [callback], [type]) （第一个参数必须要有，后面三个参数可选）
             2.参数：
                 url：请求路径
                 data：请求参数
                 callback：回调函数
                 type：响应结果的类型
         1.   
            ajax发送get请求

             //定义方法
                function  fun() {
                   $.get("ajaxServlet",{username:"rose"},function () {
                        alert(data);
                   },"text");
                }    

             

      3. $.post()：发送post请求
             1.语法： $.post(url, [data], [callback], [type])
             2.参数：
                 url：请求路径
                 data：请求参数
                 callback：回调函数
                 type：响应结果的类型
         1. ajax发送post请求

             //定义方法
                function  fun() {
                   $.post("ajaxServlet",{username:"rose"},function () {
                        alert(data);
                   },"text");
                }