Ajax学习

Ajax学习:

　　1.什么是Ajax

　　　　异步刷新技术,用来在当前页面响应不同的请求内容

　　2.为什么需要Ajax

　　　　需求:

　　　　　　有的时候我们需要将本次的响应结果和前面的响应结果内容再同一个页面中展现给用户.

　　　　解决:

　　　　　　1.在后台服务器端将多次响应内容重新拼接成一个jsp页面响应,

　　　　　　　　但是这样回造成很多内容被重复响应,资源浪费

　　　　　　2.使用Ajax技术　　　

　　3.使用Ajax

　　　　Ajax的访问原理

　　　　Ajax的基本使用流程

　　　　Ajax的状态码

　　　　Ajax的异步和同步

　　　　Ajax的请求

　　　　Ajax的响应数据类型

　　　　　　json

　　　　　　注:

　　　　Ajax的封装

　　　　Ajax的案例

　　4.ajax的readyState值

　　　　

 

　　5.ajax默认为异步处理,即ajax对象调用send之后会继续执行下面的语句,直到响应结果返回,再执行.

　　　　在使用 ajax.open()时将参数置为false则可设为同步,即代码执行到ajax.send()后会等待服务器响应结果,执行后才会继续执行send之后的代码.

　　6.代码

    <!--
        Ajax学习:
            1.ajax的概念
                局部刷新技术,不是新技术,是多种技术的组合(浏览器端的技术)
            2.ajax的作用
                实现在当前结果页中显示其他请求的响应内容
            3.ajax的使用
                ajax的基本流程
                    //创建ajax引擎对象
                    //复写onreadystatement函数
                        //判断ajax状态码
                        //判断响应状态码
                            //获取响应内容(响应内容的格式)
                                //普通字符串
                                //json(重点)(优先使用json)
                                    //其实就是将数据按照json的格式拼接好的字符串,方便使用eval方法
                                      将接收的字符串数据直接转换为js的对象
                                      json格式:
                                        var 对象名={
                                            属性名:属性值,
                                            属性名:属性值,
                                            ...
                                        }
                                //xml数据：responseXML.返回document对象
                                    通过document对象将数据从xml中获取出来

                            //处理响应内容(js操作文档结构)
                    //发送请求
                        //get请求
                            get的请求实体拼接在URL后面,"?"隔开,键值对
                            ajax.open("get",url)
                        //post请求
                            有单独的请求实体
                            ajax.open("post",url);
                            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                            ajax.send("name=张三&pwd=123");
                ajax的状态码
                    ajax的状态码
                        readyState:0,1,2,3,4
                            4:表示响应内容被成功接收(浏览器端成功接收)
                    响应状态码
                        status
                        200:表示一切OK
                        404:资源未找到
                        500:内部服务器错误
                ajax的异步和同步
                    ajax.open(method,url,async)
                    async:设置同步代码执行还是异步代码执行
                          true代表异步,false代表同步,默认是异步.

    -->
    <!--声明js代码域-->
    <script type="text/javascript">
        function getData() {
            //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
            //覆写onreadystatement函数
            ajax.onreadystatechange=function () {
                //判断ajax状态码
                if(ajax.readyState==4){
                    //判断响应状态码
                    if(ajax.status==200){
                        //获取响应内容
                        var result = ajax.responseText;
                        //获取元素对象
                        var showdiv = document.getElementById("showdiv");
                        //修改元素内容
                        showdiv.innerHTML=result;
                    }else if(ajax.status==404){
                        var showdiv = document.getElementById("showdiv");
                        //修改元素内容
                        showdiv.innerHTML="请求资源不存在";
                    }else if(ajax.status==500){
                        var showdiv = document.getElementById("showdiv");
                        //修改元素内容
                        showdiv.innerHTML="服务器繁忙";
                    }
                }else{
                    var showdiv = document.getElementById("showdiv");
                    //修改元素内容
                    showdiv.innerHTML="<img src='img/6a600c338744ebf8b025f103d8f9d72a6059a7b2.gif'>";
                }
            }
            //发送请求
            ajax.open("get","user");
            ajax.send(null);
            alert("哈哈");
        }
        
    </script>
    <style type="text/css">

 

 

<!--
    Ajax学习:
        1.ajax的概念
            局部刷新技术,不是新技术,是多种技术的组合(浏览器端的技术)
        2.ajax的作用
            实现在当前结果页中显示其他请求的响应内容
        3.ajax的使用
            ajax的基本流程
                //创建ajax引擎对象
                //复写onreadystatement函数
                    //判断ajax状态码
                    //判断响应状态码
                        //获取响应内容(响应内容的格式)
                            //普通字符串
                            //json(重点)(优先使用json)
                                //其实就是将数据按照json的格式拼接好的字符串,方便使用eval方法
                                  将接收的字符串数据直接转换为js的对象
                                  json格式:
                                    var 对象名={
属性名:属性值,
属性名:属性值,
                                        ...
                                    }
                            //xml数据：responseXML.返回document对象
                                通过document对象将数据从xml中获取出来

                        //处理响应内容(js操作文档结构)
                //发送请求
                    //get请求
                        get的请求实体拼接在URL后面,"?"隔开,键值对
                        ajax.open("get",url)
                    //post请求
                        有单独的请求实体
                        ajax.open("post",url);
                        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                        ajax.send("name=张三&pwd=123");
            ajax的状态码
                ajax的状态码
                    readyState:0,1,2,3,4
                        4:表示响应内容被成功接收(浏览器端成功接收)
响应状态码
                    status
                    200:表示一切OK
                    404:资源未找到
                    500:内部服务器错误
            ajax的异步和同步
                ajax.open(method,url,async)
                async:设置同步代码执行还是异步代码执行
                      true代表异步,false代表同步,默认是异步.

-->
<!--声明js代码域-->
<script type="text/javascript">
    function getData() {
        //创建ajax引擎对象
var ajax;
        if(window.XMLHttpRequest){
            ajax=new XMLHttpRequest();
        }else if(window.ActiveXObject){
            ajax=new ActiveXObject("Msxml2.XMLHTTP");
        }
        //覆写onreadystatement函数
ajax.onreadystatechange=function () {
            //判断ajax状态码
if(ajax.readyState==4){
                //判断响应状态码
if(ajax.status==200){
                    //获取响应内容
var result = ajax.responseText;
                    //获取元素对象
var showdiv = document.getElementById("showdiv");
                    //修改元素内容
showdiv.innerHTML=result;
                }else if(ajax.status==404){
                    var showdiv = document.getElementById("showdiv");
                    //修改元素内容
showdiv.innerHTML="请求资源不存在";
                }else if(ajax.status==500){
                    var showdiv = document.getElementById("showdiv");
                    //修改元素内容
showdiv.innerHTML="服务器繁忙";
                }
            }else{
                var showdiv = document.getElementById("showdiv");
                //修改元素内容
showdiv.innerHTML="<img src='img/6a600c338744ebf8b025f103d8f9d72a6059a7b2.gif'>";
            }
        }
        //发送请求
ajax.open("get","user");
        ajax.send(null);
        alert("哈哈");
    }
    
</script>
<style type="text/css">