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 对象的方法

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

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

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

方法	描述
open(method,url,async)	创建一个请求
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

1.3 onreadystatechange 事件

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

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

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

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

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面；500：服务器问题

1.4 服务器的响应

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

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

2.使用步骤

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

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

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

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

步骤	请求方式	实现代码
初始化组件	GET	xmlHttpRequest.open( “GET”,url, true );
POST	xmlHttpRequest.open( “POST”,url, true ); xmlHttpRequest.setRequestHeader( “Content-Type”, “application/x-www-form-urlencoded” );
发送请求	GET	xmlHttpRequest.send( null );
POST	xmlHttpRequest.send(“key=xxx&type=12&year=2016” );

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

                    }
                }
            });
        })

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

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

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

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

总结一下：

1.了解异步对象XmlHttpRequest

2.了解其四大步骤；

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

来源：oschina

链接：https://my.oschina.net/u/4271739/blog/4273495

标签

javascript

jquery

pgw

Java EE

物联网