AJAX的介绍及简单应用

最新推荐文章于 2023-06-22 10:18:01 发布

Erupt9001

最新推荐文章于 2023-06-22 10:18:01 发布

阅读量274

点赞数

分类专栏： Linux网络编程文章标签： ajax js javascript

本文链接：https://blog.csdn.net/Amos_zh/article/details/106388653

版权

Linux网络编程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

AJAX 概述

AJAX

AJAX 是 Asynchronous JavaScript And XML 的缩写
AJAX 是一种用于创建快速动态网页的技术
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面 AJAX 不需要任何浏览器插件，但需要用户允许
JavaScript 在浏览器上执行。
有很多使用 AJAX 的应用程序案例：新浪微博、 Google 地图、开心网等等。
浏览器与服务器通信采用的就是AJAX技术，AJAX核心是XMLHttpRequest对象

AJAX 是基于现有的 Internet 标准

并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

AJAX 局部更新网页流程图

AJAX局部更新网页流程图

异步流程

1、创建对象
2、设置回调函数 ，fun函数
3、open 创建服务器请求
4、send  向服务器发送请求，
5、服务器有结果会自动调用fun回调函数
(在回调函数里面根据服务器返回的响应信息 更新用户界面)

AJAX的通信过程

1、创建xmlHttpRequest对象

在js文件中开始处定义这个函数，其他js函数直接调用就能创建一个异步请求对象

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}

2、设置服务器响应的回调函数

每个（服务器的）状态改变时都会触发Onreadystatechange 这个事件处理器，通常会在这个回调函数里去调用一个JavaScript函数
服务器的状态：

readyState：请求的状态
0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
status：服务器的HTTP状态码
200对应OK，404对应Not Found

不是每一种状态改变都要处理，一般在readyState 状态值为4，status状态值为200的时候，处理服务器应答，所以在回调函数里写一个判断，判断readyState 为4，status为200，再做处理
服务器的应答：

responseText 和 responseXML就是服务器的反馈的结果

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器通常会调用一个JavaScript函数
readyState	请求的状态。0 = 未初始化，1 = 正在加载，2 = 已加载， 3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个字符串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码，200对应OK，404对应Not Found
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

标准的XMLHttpRequest对象的方法：

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”, “url”, true)	建立对服务器的请求。method参数可以是GET、POST。url参数可以是相对URL或绝对URL。 true:异步；false:同步
send(content)	向服务器发送请求
setRequestHeader(“header”, “value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

3、open的使用

//想从服务器上请求文件a.txt
var url = "a.txt?data";
xmlhttp.open("GET",url,true);//true异步   false同步

4、send的使用

//GET方式：
xmlhttp.send(不要传任何数据);
//POST方式：
xmlhttp.send(data);

案例：请求服务器上的文件数据

demo.txt

<html>
    <head>
        <title>demo</title>
        <meta charset="utf-8"> 
        <script type="text/javascript" src="./js01.js"></script> 
    </head>
    <body>
        文件的内容: <label id="label"></label>
        <br>
        <input type="button"  value="获取文件的内容" id="button" onclick="get_file_content();">
    </body>
</html>

js01.js

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}

function get_file_content()
{
    //获取xmlhttp对象
    var xmlhttp = null;
    xmlhttp = getXMLHttpRequest();

    //设置服务器响应的回调函数
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("label").innerHTML = xmlhttp.responseText;
        }
    }
    // 创建服务器请求
    xmlhttp.open("get","./file/a.txt", true);

    // 发送服务器请求
    xmlhttp.send();
}

Erupt9001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX的介绍及简单应用

AJAX 概述AJAX 是 Asynchronous JavaScript And XML 的缩写AJAX 是一种用于创建快速动态网页的技术AJAX 不是新的编程语言，而是一种使用现有标准的新方法AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript 在浏览器上执行。有很多使用 AJAX 的应用程序案例：新浪
复制链接

扫一扫

专栏目录