AJAX技术入门

前端之家收集整理的这篇文章主要介绍了AJAX技术入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX:Asynchronous Javascript And XML,所以说,AJAX就是指异步的JavaScript和XML。

对比AJAX和传统网页

传统的网页如果需要更新内容,必须重载整个网页

AJAX:使用了AJAX技术后,可以在后台和服务器进行少量的数据交换,使网页实现异步更新。也就是可以在不重新加载整个网页的情况下,对网页的某部分进行更新。


AJAX的核心是JavaScript和XMLHttpRequest,XMLHttpRequest使用户通过JavaScript向服务器提出请求并处理响应。

创建XMLHttpRequest对象的步骤:

1.建立XMLHttpRequest对象

2.注册回调函数

3.使用open方法设置和服务器端交互的基本信息

4.设置发送的数据,开始和服务器端交互

5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容

具体代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">function submit() {
    //1.创建XMLHttpRequest
    if (window.XMLHttpRequest) {
        //IE7,IE8,FireFox,Morilla,Safari,Opera
        xmlhttp = new XMLHttpRequest();
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if (window.ActiveXObject) {
        //IE6,IE5
        var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try {
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch (e) {

            }
        }
    }
    if (xmlhttp==undefined||xmlhttp==null) {
        alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
        return;
    }
    //2.注册回调方法
    xmlhttp.onreadystatechange = callback;

    //记忆一个固定用法获取文本框中用户输入的内容
    var userName = document.getElementById("UserName").value;

    //3.设置和服务器端交互的相应参数
    //使用get方式异步交互
    xmlhttp.open("GET","AJAX?name=" + userName,true);

    //4.设置向服务器端发送的数据,启动和服务器端的交互
    xmlhttp.send(null);

    ////3.post方式设置和服务器端交互的相应参数
    //xmlhttp.open("POST","AJAX",true)
    //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    ////4.设置向服务器端发送的数据,启动和服务器端的交互
    //xmlhttp.send("name"+userName);

    //回调方法
    function callback() {
        //5.判断和服务器端的交互是否完成,服务器端是否正确返回了数据
        if (xmlhttp.readyState==4) {
            //表示和服务器端的交互已经完成
            if (xmlhttp.status==200) {
                //表示服务器的相应代码是200,正确返回了数据
                var message = xmlhttp.responseText;

                //记忆向div标签中填充文本内容方法
                var div = document.getElementById("message");
                div.innerHTML = message;
            }
        }
    }
}</span>
AJAX技术为我们编写网页提供了一种新思路。 原文链接:https://www.f2er.com/ajax/162230.html

猜你在找的Ajax相关文章