ajax概述

目录

1.什么是ajax

2.ja原生ajax

3.jQuery框架的ajax

4.综合案例

---

1.什么是ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

同步方式发送请求

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。(卡死)

异步方式发送请求

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

2.ja原生ajax

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听服务器变化的事件

设置回调函数(自定义函数,服务器响应成功后,AJAX自动调用函数)

3）绑定提交地址

4）发送请求

5）接受响应数据

 function butOnclick() {
            //1.获取AJAX对象
            var xmlhttp = new XMLHttpRequest();
            //2.给AJAX对象添加监听AJAX引擎状态变化的事件,并设置事件的回调函数
            xmlhttp.onreadystatechange=function()
            {         
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    // 5.获取服务器响应的数据
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

            //3.绑定要发送到服务器的地址
            xmlhttp.open("GET","${pageContext.request.contextPath}/js_ajax",true);

            //4.把AJAX请求发送到服务器
            xmlhttp.send();
        }


  <input type="button" value="AJAX异步提交" onclick="butOnclick()"/>
    <div id="myDiv"></div>

3.jQuery框架的ajax

语法：jQuery.get(url, [data], [callback], [type])

GET请求方式

  $("#btn").click(function (){
               $.get(
                   'http://localhost:8080/MyFilter_war_exploded/ajax',
                   {name:'list'},
                   function (data){
                       $('#div').html(data);
                   }) ;

POST请求方式

$.post(
                  '/MyFilter_war_exploded/ajax',
                  {name:'list'},
                  function (data){
                      $('#div').html(data);
                  })

AJAX请求方式

 $.ajax({
                    //1:URL地址
                    url:"/MyFilter_war_exploded/ajax",
                    // 2:异步请求
                    async:true,
                    //3:给服务器传递参数
                    data:"name=haohao&age=33",
                    //4:请求方式
                    type:"POST",
                    //5 :响应数据的类型
                    dataType:"text",

                    // 6： 回调函数 data 接受到的服务器响应过来的数据
                    success:function(data){
                        alert(data);

                    },

                    //7: 回调函数：服务器出错的时候执行
                    error:function(){
                        alert("数据没有成功返回!")
                    }
                });

4.综合案例

检测用户名是否已经被注册