前后端通信—AJAX详解

Ajax概述

Ajax全称：Asynchronous Javascript and XML（异步JavaScript和XML）

它并不是Javascript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体（AJAX 不是新的编程语言，而是一种使用现有标准的新方法。）主要有：

Javascript，通过用户或者其他与浏览器相关事件捕获交互行为

XMLHttpRequest对象，通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求

服务器上的文件，以XML，HTML或者JSON格式保存文本数据

其他JavaScript，解释来自服务器的数据，（比如PHP从MySQL获取的数据）并将其呈现到页面上

Ajax作用

使用Ajax，可以无刷新状态更新页面，并且实现异步提交，提升用户体验。

Ajax优势

不需要插件支持（一般浏览器且默认开启Javascript即可）

用户体验极佳（不刷新网页即可获取可更新的数据）

提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）

减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

Ajax不足之处

前进，后退的功能被破坏（因为Ajax永远在当前页面，不会几率前后页面）

搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解js引起变化数据的内容）

开发调试工具缺乏（相对于其他语言的工具集来说，js或AJax调试开发很少）

一个简单的Ajax程序的流程（获取一个文件的内容）

第一步：打开浏览器，创建一个ajax对象，ie6及以下new ActiveXObject('Microsoft.XMLHTTP')，使用try，catch或者使用if进行判断进行兼容性的处理

var xhr = null;
ActiveXObject('Microsoft.XMLHTTP')
try {
    xhr = new XMLHttpRequest();
} catch (e) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

第二步：调用ajax对象的open方法，这个方法有三个参数，分别表示提交方式 Form-method，提交地址 Form-action，异步（同步）

xhr.open('get','1.txt',true);

需要注意的是如果使用post请求，就一定要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;     charset=gb2312");

第三步：提交，发送请求，调用ajax对象的send()方法，相当于Form的submit

xhr.send();

第四步：等待服务器返回内容，请求状态监控，使用ajax对象的onreadystatechange事件，该事件有如下属性：

onreadystatechange属性是一个方法,监控到响应内容的返回,根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法

readyState属性（请求状态）

0 （未初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

status属性：服务器(请求资源)的状态

返回的内容的形式

responseText：返回以文本形式存放的内容

responseXML：返回XML形式的内容

xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 ) {
        if ( xhr.status == 200 ) {
            alert( xhr.responseText );
        } else {
            alert('出错了,Err：' + xhr.status);
        }
    }
}

整体代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                var xhr = null;
                try {
                    xhr = new XMLHttpRequest();
                } catch (e) {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

                xhr.open('get', '1.txt', true); //在地址栏输入地址
                xhr.send();    //提交

                //等待服务器返回内容
                xhr.onreadystatechange = function() {
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                            alert( xhr.responseText );
                        } else {
                            alert('出错了,Err：' + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>

同步与异步

使用AJax最关键的地方，就是实现异步请求，接受响应及执行回调，那么异步与同步有什么区别呢？

同步：即执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话（我们普通的WEB程序开发基本都是同步的），发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步：可以同时执行多条任务，使用异步模式执行，感觉有多条路线，类似于短信，不会因为看一条短信而停止接受另一条短信，发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

Ajax也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web页面出现假死状态，所以一般Ajax大部分采用异步模式

同步请求:客户端请求(等待)->服务端处理->响应->页面载入（缺少对象:XMLhttpRequest），这时候如果有错误，只能再次发送请求，再次等待
异步请求：比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

总结：页面上的操作和服务器端的操作互相之间不会造成阻塞

应用中get和post的区别处理

使用get方式请求是在接口后面加上一个?然后后面带上参数，参数之间使用&分隔，使用get方式请求需要解决两个问题：中文乱码和缓存的问题，下面是get方式请求的列子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /*
            1.当参数一样的时候，请求后台数据时会有缓存，解决缓存办法可以 在url？后面连接一个随机数或者时间戳
            2.如果参数中有中文会产生乱码 ，解决办法是需要进行编码encodeURI
        */
        xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        xhr.send();
        
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出错了,Err：' + xhr.status);
                }
            }
        }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

使用post方式请求，不会有缓存和中文乱码的问题，因为需要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;     charset=gb2312");

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        xhr.open('post','2.post.php',true);
        //post方式，数据放在send()里面作为参数传递
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
        //post没有缓存问题
        //无需编码
        xhr.send('username=刘伟&age=30');
        
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出错了,Err：' + xhr.status);
                }
            }
        }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

ajax获取数据的处理

在获取数据的过程中，由于数据有很多种类型

前后端通信—AJAX详解

总结：页面上的操作和服务器端的操作互相之间不会造成阻塞

猜你喜欢