AJAX技术入门「建议收藏」

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技术为我们编写网页提供了一种新思路。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105741.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pandoc latex转word_使用latex格式编辑word

    pandoc latex转word_使用latex格式编辑word1、TeXstudio中输出为pdf,用word打开另存为A.docx2、使用(https://pandoc.org/),命令行:pandoc-s.\XXX.tex-o.\B.docx3

  • Winrar去广告图文教程「建议收藏」

    Winrar去广告图文教程「建议收藏」一、前言1.1Winrar解压缩工具  市场上有很多优秀的压缩工具,常用的有Winrar和360压缩工具。Winrar是免费压缩工具,特色是每次使用都会弹出广告。影响用户体验和工作效率,当然最重要的是影响心情。效果如下图。图1-1、Winrar弹广告效果图二、问题处理说明2.1问题解决方式  此处使用工具Resourcehacker对winrar.e…

  • 安装python应该先安装pycharm还是python_Pycharm及python安装详细步骤及PyCharm配置整理(推荐)…「建议收藏」

    安装python应该先安装pycharm还是python_Pycharm及python安装详细步骤及PyCharm配置整理(推荐)…「建议收藏」首先我们来安装python1、首先进入网站下载:点击打开链接(或自己输入网址:https://www.python.org/downloads/),进入之后如下图,选择图中红色圈中区域进行下载。2、下载完成后如下图所示3、双击exe文件进行安装,如下图,并按照圈中区域进行设置,切记要勾选打钩的框,然后再点击Customizeinstallation进入到下一步:4、对于上图中,可以通过Brow…

  • 详解MIPI协议

    详解MIPI协议目录前言MIPI简介MIPI联盟的MIPIDSI规范MIPI名词解释MIPIDSI分层结构command和video模式D-PHYLane模组Lane全局架构Lane电压和状态DATALANE操作模式时钟LANE低功耗状态高速数据传输高速CLK传输D-PHY总结DSICSI前言MIPI接口的内部非常复杂,如果不是专门去做MIPI接口,没有必要像研究H264一样往深入的去研究。我们知道MIPI协议连接了camera与soc、LCD和soc,作为此间的开发者,我们只需要关注他怎么使用就可以了知识

  • HDU1007 Quoit Design 【分治】

    HDU1007 Quoit Design 【分治】

  • MySQL JDBC URL各参数详解

    MySQL JDBC URL各参数详解参数名称参数说明缺省值最低版本要求user数据库用户名(用于连接数据库)password用户密码(用于连接数据库)useUnicode是否使用Unicode字符集,如果参数characterEncoding设置为gb2312或gbk,本参数值必须设置为truefalse1.1guseSSLMySQL在高版本需要指明是否进行SSL连接在mysql连接字符串url中加入ssl=true或者false即可characterEncoding…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号