了解一下ajax

AJAX：是一种无需重新加载页面的情况下能够更新部分（局部更新）网页的技术。

1. 概念：ASychronous JavaScript And XML 异步的JavaScript和XML

首先了解一下异步和同步的区别。

异步：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他的事情，中间的过程并不影向其他操作。

同步：客户端发送请求给服务器端，当服务器返回响应之前，客户端在此期间什么事情都不可以做，只能处于等待状态（卡死）。

AJAX运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。

实现方式：

1.js实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现ajax</title>

    <script>

        function fun() {

            var ajaxServlet;

            if (window.XMLHttpRequest)

            {// code for IE7+, Firefox, Chrome, Opera, Safari

                ajaxServlet=new XMLHttpRequest();

            }

            else

            {// code for IE6, IE5

                ajaxServlet=new ActiveXObject("Microsoft.XMLHTTP");

            }

            ajaxServlet.onreadystatechange=function(){

                if(ajaxServlet.readyState==4){//代表已接收后台数据，这时进行数据处理

                    var result = ajaxServlet.responseText;

                    var mydiv = document.getElementById("mydiv");

                    mydiv.innerHTML=result;

                }

            }

            //建立连接 第一个参数是请求方式，第二个是URL，第三个参数true代表异步，false同步

            ajaxServlet.open("GET","ajaxServlet?username=jerry",true);

            //发送xmlhttp请求

            ajaxServlet.send();

        }

    </script>

    <style>

        #mydiv{

            border: 1px solid black;

            width: 120px;

            height: 50px;

        }

    </style>

</head>

<body>

<input type="button" value="发送异步请求" onclick="fun();"><br/>

<div id="mydiv">

</div>

</body>

</html>

XMLHttpRequest 对象用于和服务器交换数据。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true;例如：

xmlhttp.open("GET","ajax_test.asp",true);

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息

2.jQuery实现

1. $.ajax({key1:value1,key2:value2,....})方法

常用的一些选项：async:true,代表异步处理，默认就是true，URL：“资源路径”，data：{参数1=“值1”...}，dataType:"json",参数返回类型，type：post/get,提交方式，success:function(){}；响应成功后执行的函数，error：function(){},响应失败执行的函数。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery_ajax2</title>

    <script src="js/jquery-1.11.3.min.js"></script>

    <script>

        function fun(){

            $.ajax({

                url:"ajax",

                data:{"content":"今天天气真不好！","name":"margin"},

                async:"true",//默认为true，异步

                type:"post",//默认get提交

                dataType:"text",//返回类型

                success:function (data) {

                   document.getElementById("div1").innerHTML = data;

                },//响应成功，执行success

                error:function () {

                    var div1 = document.getElementById("div1");

                    div1.innerHTML="服务器忙碌中，请稍后重试！";

                }//执行失败，error对应的函数执行

            })

        }

    </script>

    <style>

        #div1{

            width: 220px;

            height: 150px;

            border: 2px solid black;

        }

    </style>

</head>

<body>

<input type="button" value="发送异步请求" onclick="fun();"><br/>

<div id="div1">

</div>

</body>

</html>

2.$.get(url,data,callback,type); 第一个参数是访问的地址，第二个参数是传递的参数，第三个参数是写执行成功后的回调函数，第四个代表服务器返回的参数文本类型，常用的有json,text等。

function fun() {

    $.get("ajaxServlet",{username:"tom"},function (name) {

        alert(name);

    },"text");

}

3.$.post(url,data,callback,type);jQuery通过post方法实现AJAX的方式和get方法相似，两者除了提交数据的方式不同，其余的使用方式基本一样。

function fun() {

$.post(

"ajaxServlet",

{username:"tom"},

function (name) { alert(name); },

"text");

}