AJAX

第一章：AJAX与jQuery

概念：AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。阿贾克斯

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。简言之：是局部刷新技术。异步刷新。

回顾历史：

• Web 1.0 sina sohu 用户被动接受新闻
• Web 2.0 社区，web群 互动 环节增加，用户和服务器交互
• Web 3.0 自媒体，突出客户的实现，客户也可以成为中心，其他人订阅 参与 讨论等
• Web 4.0 物联网时代 自媒体 人 服务器 +机器交互，机器本身也是参与者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-As9291jx-1589017347355)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143743804.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjD07pgw-1589017347359)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509143807384.png)]

1.Ajax核心 XMLHttpRequest

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.1 对象的创建

let xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

1.2 对象的方法

method：http请求的方法有俩get/post,选择就是get/post。

url：就是View层的页面要提交到服务器的请求，一般是Servlet

async:true：异常请求；false:同步请求

1.3 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

1.4 服务器的响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

2.使用步骤

如何使用ajax，使用有两种：一种是前端的纯粹的使用，node+ajax；一种是后台的，我们关注的是后台。

我们之前增加用户的时候，假设用户名(账户)不能重复，我们之前是没有判断的。

当数据库服务器存在某用户的时候，文本框离开，则报已经存在该用户了；否则，显示可以注册。

• 创建XMLHttpRequest对象
• 设置请求信息open(get|post,url,true|false)
• 向服务器发送请求
• 让XmlHttpRequest对象接受服务器的响应数据，通过创建的回调函数
• 编写服务器端处理客户端请求

get代码实现：

 //1.创建XmlHttpRequest对象,封装一下，封装到一个函数;
        function createXhr() {
            if(window.XMLHttpRequest)
                return new XMLHttpRequest();//如果有，则创建其对象;
            else
                return new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.开始实现我们的目标；离开的事件是blur
        $(function () {
            //离开的时候，先判断一下；用户名不能为空，实际上应该是正则验证;
            $("#name").blur(function () {
                let name=$("#name").val();
                if(name==null||name==''){//后续使用正则实现
                    $("#nameinfo").html("用户不能为空!").addClass("nameinfo");
                    /*刚才的错误是style里面加了一个html的注释，亏!!!*/
                }else{
                    //否则，就是输入的不是空了，有值，那这个值就要看看是否存在于数据库了。
                    //2.1 这时候要得到XmlHttpRequest对象;
                    xhr=createXhr();
                    //2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
                    xhr.open("get","userServletByName?name="+name,true);
                    //2.3.发送请求,get的时候不加东西；
                    xhr.send(null);
                    //2.4当事件改变Ok的时候，响应的函数；
                    xhr.onreadystatechange=function () {
                        //readyState==4;并且状态为200的时候，才OK。
                        if(xhr.readyState==4 && xhr.status==200){
                            //定义变量data，接受异步对象xhr的服务器的响应数据;由Servlet来返回
                            let data=xhr.responseText;
                            console.log(data);
                            //暂停一下;
                            //下面就是根据data响应的数据值做出判断;
                            //服务器端响应给我们，true|false了.data-->文本;我们把它当成了boolean
                            if(data=='true'){
                                $("#nameinfo").html("用户名已经注册").addClass("nameinfo");
                            }else{
                                $("#nameinfo").html("用户名可以注册");
                                $("#nameinfo").css("color","green");
                            }
                        }

                    }
                }
            });
        })

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
 

post代码实现：

修改get的2. 3.步骤即可;

 //2.2设置请求行open,请求后台的Servlet,客户端向服务器发送了一个参数name，值name
                    //xhr.open("get","userServletByName?name="+name,true);
                    xhr.open("post","userServletByName",true);
                    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //必须有;
                    //2.3.发送请求,get的时候不加东西；
                    //xhr.send(null);get 没东西;
                    xhr.send("name="+name);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

问题：

1.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSltRVVd-1589017347367)(E:\政通路\课堂笔记\S2\Ajax\assets\image-20200509155731042.png)]

//向客户端发响应，编码要一致;
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");

  

 

  
1
  
2
  
3
 

2.出来2行的问题是需要加判断,并且&&符号；

 if(xhr.readyState==4 && xhr.status==200){
     代码
 }

  

 

  
1
  
2
  
3
 

总结一下：

1.了解异步对象XmlHttpRequest

2.了解其四大步骤；

3.通过javaweb代码来实践一下。这个是重点，看视频，一步一步走；

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/106024520