Ajax简介

Posted 2021-01-30 jjqq0921

1.概念

百度百科：Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

W3C：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

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

　AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

   AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

   局部刷新、异步加载

2.使用场景：百度地图， 用户注册校验等

3.同步与异步

同步：发一次请求，需要等待服务器响应结束，然后才能发生第二次，每次刷新都是整个页面刷新             

异步：发一次请求，无需等待服务器的响应，可以直接发送第二次请求。使用js来接收服务器响应，然后使用js进行局部刷新        

4.优缺点

优点： 不需要插件、用户体检极佳、提示web程序的性能、减轻服务器和宽带的负担

缺点： 没有了前进后台功能

5.ajax简单使用

ajax核心对象：XMLHttpRequest 

实现步骤：

第一步：创建XMLHttpRequest对象

第二步：打开与服务器的连接

 第三步：发送请求

第四：处理响应

html页面js代码:

window.onload=function(){
        var but =document.getElementById("but");    
        but.onclick =  function(){
            //第一步(创建XMLHttpRequest对象)
            var xmlHR = new XMLHttpRequest();
            // 第二步(打开与服务器的连接)
            var method = "get" ;
            var url    = "/JQuery_demo2/ajax1.do?name=jack"   ;
            xmlHR.open(method, url);
            // 第三步(发送请求)
            xmlHR.send();
            //第四步(处理响应)
            xmlHR.onreadystatechange = function(){
                if(xmlHR.readyState == 4){
                    if(xmlHR.status == 200){
                        var text= xmlHR.responseText;
                        alert(text);
                    }}}}}

服务器servlet代码:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String method = request.getMethod();
        System.out.println("请求       ：" + method);
        String name = request.getParameter("name");
        System.out.println("参数     ：" + name);
    response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write("响应成功!");
        out.close();
    }

4. jquery的ajax

①$.ajax(url,[settings])  

最底层的ajax请求，功能是最完善的

<script type="text/javascript">
        $(function(){
            $("input").click(function(){
                /*    $.ajax(url,[settings])
                    $.ajax([settings])
                    settings参数 设置所有的参数
                        url     : 发送请求的地址
                        data    : 发送到服务器的数据，请求参数
                        type    ：请求方式(get、post)
                        success    ：成功的回调函数     success(data, textStatus, jqXHR)
                        dataType：服务器返回的数据类型
                            "xml": 返回 XML 文档，可用 jQuery 处理。
                            "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
                            "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘‘‘注意：‘‘‘在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
                            "json": 返回 JSON 数据 。
                            "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
                            "text": 返回纯文本字符串*/
                $.ajax({
                    "url"          : "/JQuery_demo2/ajax2.do" ,
                    "data"         : {"username":"admin1","password":"123456"},
                    "type"         : "post",
                    "dataType"    : "text",
                    "success"    :  function(data){
                        alert(data);
                    }
                });
            })
        });
    </script>

View Code

②$.get(url,[data],[fn],[type])

以get发送请求

<script type="text/javascript">
        $(function(){
            $("input").click(function(){
            /*    $.get()
                格式  $.get(url,[data],[callback],[type])
                    参数：
                        url:待载入页面的URL地址
                        data:待发送 Key/value 参数。
                        callback:载入成功时回调函数。
                        type:返回内容格式，xml, html, script, json, text, _default。
                    请求只能是get请求，不适合发送中文数据
            */
                $.get(
                    "/JQuery_demo2/ajax2.do",
                    {"username":"jack","password":"lovelucy"},
                    function(data){
                        alert(data);
                    },
                    "text"
                )    
            })
        });
    </script>

View Code

③$.post(url,[data],[fn],[type])

以post发送请求

<script type="text/javascript">
        $(function(){
            $("input").click(function(){
            /*    $.post(url, [data], [callback], [type])
                    参数：
                        url:发送请求地址。
                        data:待发送 Key/value 参数。
                        callback:发送成功时回调函数。
                        type:返回内容格式，xml, html, script, json, text, _default。    
                    发生post请求
            */
                $.post(
                    "/JQuery_demo2/ajax2.do",
                    {"username":"lucy","password":"lovetom"},
                    function(data){
                        alert(data);
                    },
                    "text"
                )
            })
        });
    </script>

View Code