Ajax

Ajax :

        AJAX 全称为 "Asynchronous JavaScript and Xml”(异步JavaScript 和XML) ,是一种创建交互式网页应用的网页开发技术。

 不是一种新技术，是如下几种技术的组合应用：

        -基于web标准    XHTML+CSS 的表示；

        -使用 DOM 进行动态显示及交互；

        -使用XML 和 XSLT 进行数据交互及相关操作；

        -使用 XMLHttpRequest 进行异步数据查询、检索；

        -使用 JavaScript 将所有的东西绑定在一起。

Ajax 本质上是一个浏览器端的技术。

 

 

Ajax 需求：

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

    问题：在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应。但是这样会造成很多响应内容被重复响应，资源浪费

    解决：使用Ajax 技术

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

 

为什么学习Ajax ?

            .)  通过异步模式，提升了用户体验

            .)  优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

            .)  现在几乎所有的 B/S 软件项目都会增加 Ajax ，从而提高用户体验度，最典型的应用：Google Maps

 

创建Ajax程序的基本流程：

   

 

 

 

Ajax 的两种传参方式：

    Get 方式传参

            - 直接通过 url 传参

            - 注意：get方式提交经常会遇到浏览器缓存问题 ， 浏览器不对同样的url 重复提交，这时可以再url 后面增加参数：

                    .?rand = Math . random() 或者 : rand = new Date()

    Post 方式传参

            request.open(“post”,url);

            req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            req.send("a=3&b=中国");  

 

 

    Ajax学习：
        1、ajax的概念
            局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
        2、ajax的作用
            实现在当前结果页中显示其他请求的响应内容
        3、ajax的使用
            ajax的基本流程
                //创建ajax引擎对象
                //复写onreadystatement函数
                    //判断ajax状态码
                        //判断响应状态码
                            //获取响应内容(响应内容的格式)
                                //普通字符串：responseText
                                //json(重点)：responseText
                                    其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法
                                    将接受的字符串数据直接转换为js的对象
                                    
                                    json格式：
                                        var 对象名={
                                                属性名:属性值,
                                                属性名:属性值,
                                                ……
                                            }
                                    
                                //XML数据：responseXML.返回document对象
                                    通过document对象将数据从xml中获取出来
                            //处理响应内容(js操作文档结构)
                //发送请求
                    //get请求
                        get的请求实体拼接在URL后面，？隔开，键值对
                        ajax.open("get","url");
                        ajax.send(null);
                    //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代表同步

 

 

转载于:https://my.oschina.net/u/3788977/blog/2207992