zoukankan      html  css  js  c++  java
  • 170817关于AJAX的知识点

             1.AJAX
                      [1] AJAX简介
                            全称: Asynchronous JavaScript And XML
                                        异步的JavaScript和XML
                                        AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
                                        XML指的是服务器响应的数据的格式。
                                        目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
                      [2] 同步和异步
                            同步:
                                        当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
                            异步:
                                        当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。
                      [3] XMLHttpRequest对象
                            我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
                                        在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
                                        如何获取XMLHttpRequest对象
                            var xhr = new XMLHttpRequest();
                      [4] 使用步骤
                            1.创建XMLHttpRequest对象
                                        大部分比较新的浏览器都支持的方式(IE7以上)
                                               var xhr = new XMLHttpRequest();
                                        IE6以下的
                                               var xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                        IE5.5以下的
                                               var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                        通用的获取XMLHttpRequest对象的方法:
                                            写一个获取XHR的方法
                                               function getXMLHttpRequest(){
                                               try{
                                                    //大部分浏览器都支持的方式
                                                    return new XMLHttpRequest();
                                               }catch(e){
                                                   try{
                                                     //IE6以下浏览器支持的方式
                                                     return new ActiveXObject("Msxml2.XMLHTTP");
                                                       }catch(e){
                                                            try{
                                                                 //IE5以下的浏览器
                                                                 return new ActiveXObject("Microsoft.XMLHTTP");
                                                             }catch(e){
                                                                   alert("你是火星来的吧!你的浏览器不支持AJAX!");
                                                                           }
                                                       }
                                                 }
                                             }
                               2.设置请求信息(请求地址,请求方式,请求参数)
                                            xhr.open(请求方式,请求地址);
                                            在发送post请求时,还需要设置一个请求头,如下:
                                            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      
                               3.发送请求
                                            xhr.send(请求体);
                                            get请求没有请求体,所以send中可以传null或什么都不传。
                                            post请求需要通过send来设置请求参数。    
                               4.接收响应信息
                                            //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
                                                 xhr.onreadystatechange = function(){
                                            //判断当前readyState是否为4 , 且响应状态码为200
                                                 if(xhr.readyState==4 && xhr.status==200){
                                            //读取响应信息,做相关操作。
                                                 //如果信息为纯文本
                                                       xhr.responseText
                                                 //如果信息为XML
                                                       xhr.responseXML
                                                 }
                                               };

                                            get:

                                           

                                            post:

                                           

                                           servlet往页面传参的方法:

                                            
                    [5] 响应数据的格式(暂时无图)
                              响应一个XML
                                    当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
                                    返回 User :username:sunwukong  age:18 gender:男
                                    username:sunwukgon,age:18,gender:男
                                    我们可以通过一个XML格式来返回一个大量的信息
                                    <user>
                                       <name></name>
                                       <age></age>
                                       <gender></gender>
                                    </user>

            
           

  • 相关阅读:
    重写trim方法时摸索出的删除数组长度的思路
    常用String类方法-Java
    Lambda入门,看这一篇幅就够了
    利用Spring AOP的通知类型以及创建通知
    SpringAOP基础
    Java开发中解决Js的跨域问题
    从properties中读取配置创建对象
    SpringBoot打包为war包,并在tomcat中运行
    查看SpringBoot应用中的嵌入式tomcat的版本
    Mybatis中返回Map
  • 原文地址:https://www.cnblogs.com/12344321hh/p/7383727.html
Copyright © 2011-2022 走看看