前端开发的流程_Ajax交互

前端开发最好用的浏览器|web前端开发百度贴吧|慕课网web前端开发百度云

AJAX是什么?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

XMLHttpRequest对象

其实,这个技术无非就是一个XMLHttpRequest对象而已,只要你熟悉这个对象的API的使用即可实现异步加载你想要的数据。
那怎么来创建这个对象呢?
创建对象XMLHttpRequest
javascript 代码片段

var xmlHttp = new XMLHttpRequest();

要是不用兼容旧浏览器IE5和IE6 就是以上一行代码即可创建这个对象。当然现在IE5和IE6,可以说淘汰了,所以就不兼容它了,没必要。想要兼容它就加个if判断即可,它的创建方式如下:
javascript 代码片段

var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
//判断如:
var xmlHttp;
if (window.XMLHttpRequest) { //现代浏览器
    xmlHttp = new XMLHttpRequest();
} else { //旧版浏览器IE5、IE6
    xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}

以下给出的实例都不考虑旧版浏览器了,淘汰了没必要。
这个对象有如下3个方法和5个属性,如下
####方法:
1、 xmlHttp.open(method,url,async);
参数method:规定请求的类型;GET或POST
参数url: 请求的地址;
参数async: true(异步)或false(同步)。
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
[ul]
[li]无法使用缓存文件(更新服务器上的文件或数据库)[/li]
[li]向服务器发送大量数据(POST 没有数据量限制)[/li]
[li]发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠[/li]
[/ul]
2、 xmlHttp.send(string)
将请求发送到服务器
参数String:仅用于POST请求
3、 xmlHttp.setRequestHeader(header, value)
向请求添加http头
header:规定头的名称
value:规定头的值
如:xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); 这个是告诉服务器端以这个类型类解析数据
####属性:
1、 onreadystatechange : 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
2、 readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
[ul]
[li]0 请求未初始化[/li]
[li]1 服务器连接已建立[/li]
[li]2 请求已接收[/li]
[li]3 请求处理中[/li]
[li]4 请求已完成,且响应已就绪[/li]
[/ul]
3、 status:
200:“ok”
404:“未找到页面”
一般接收服务器返回的数据写法如下:
javascript 代码片段

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText; //获得字符串形式的响应数据。
    }
}

4、 responseText: 获得字符串形式的响应数据。
5、 responseXML : 获得 XML 形式的响应数据。

代码实战

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端实际开发流程:ajax</title>
</head>
<body>
    <button id=”getAjax1″>获取responseText</button>
    <button id=”getAjax2″>获取responseXML</button>
    <br/>
    <div>
        <p>responseText返回的文本:
            <span id=”output1″></span>
        </p>
        <p>responseXML返回的文本:
            <span id=”output2″></span>
        </p>
    </div>
    <script>
        //采用模块模式来封装代码
        var myAjax = (function () {
            function Temp() {
                this.xmlHttp = new XMLHttpRequest();
            }
            Temp.prototype.init = function (method, url, callback) {
                var self = this;
                this.xmlHttp.onreadystatechange = function () {
                    if (self.xmlHttp.readyState === 4 && self.xmlHttp.status === 200) {
                        callback(self.xmlHttp);
                    }
                };
                this.xmlHttp.open(method, url, true);
                this.xmlHttp.send();
            };
            return {
                ajax: function (method, url, callback) {
                    var ajaxChild = new Temp();
                    ajaxChild.init(method, url, callback);
                }
            }
        })();
        //测试用例
        document.getElementById(‘getAjax1’).onclick = function () {
            myAjax.ajax(‘GET’, ‘demo.php?name=wen’, function (xmlHttp) { //获取responseText文本数据
                document.getElementById(‘output1’).innerHTML = xmlHttp.responseText;
                console.log(xmlHttp.responseText);
            })
        };
        document.getElementById(‘getAjax2’).onclick = function () {
            myAjax.ajax(‘GET’, ‘demo.xml’, function (xmlHttp) { //获取responseXML文档对象
                var xmlEleValue = xmlHttp.responseXML.getElementsByTagName(‘name’)[0].firstChild.nodeValue;
                document.getElementById(‘output2’).innerHTML = xmlEleValue;
                console.dir(xmlHttp.responseXML);
            });
        }
    </script>
</body>
</html>

demo.php
php 代码片段

<?php
echo “hello world”;

demo.xml
xml 代码片段

<?xml version=”1.0″ encoding=”UTF-8″?>
<name>wen</name>

参考链接

菜鸟教程-AJAX教程

前端开发文档策划书|前端开发文档|京东云平台 前端开发文档

» 本文来自:前端开发者 » 《前端开发的流程_Ajax交互》
» 本文链接地址:https://www.rokub.com/3958.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!