ajax 核心技术

最新推荐文章于 2022-10-10 14:18:22 发布

valexchao

最新推荐文章于 2022-10-10 14:18:22 发布

阅读量461

点赞数

本文链接：https://blog.csdn.net/valexchao/article/details/51162125

版权

ajax

Asynchronous JavaScript and XML

异步的Js 和XML

Web2.0的核心技术，不用刷新整个页面，只对局部更新，节省带宽，提高加载速度，改善用户体验。

例子如weibo的点赞按钮

核心

异步数据获取技术

XMLHttpRequest 对象

2.1

创建XMLHttpRequset对象

request = new XMLHttpRequest()

firefox,opera, safari

xmlhttp = new ActiveXObject('Msxm2.XMLHTTP')

IE6+

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')

others

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function doAjax(the_request) {
        var request = null;
        if(window.XMLHttpRequest){
            request = new XMLHttpRequest();
            alert("1您的浏览器支持Ajax")
        }else if(window.ActiveXObject){
            request = new ActiveXObject('Microsoft.XMLHTTP');
            alert("2您的浏览器支持Ajax")
        }else{
            alert("您的浏览器不支持Ajax")
        }
    }
</script>
<input type="button" οnclick="doAjax('ajax-02.txt')">
</body>
</html>

-----------------------------------------

2.2 XMLHttpRequest对象属性

2.2.1 onreadystatechange

request.onreadystatechange = function(){
         //....
}

2.2.2 readyState属性

0 请求未初始化

1 请求已经提出还未发出

2 请求已经发送

3 服务器正在处理中，为处理完成

4 服务器请求完成

2.2.2 responseText属性

获取从服务返回的数据

request.onreadystatechange = function(){
        if (request.readyState == 4){
                 //处理从服务器获取的数据
                  alert(request.responseText);
          }
}

2.2.3 处理响应函数

open()

建立请求

三个参数

GET/POST Http方法

服务器端脚本的URL

异步处理标志

2.2.4 send()

将请求发送至服务器端

例子

request = new XMLHttpRequest();
request.open("GET", "test.txt", true);
request.onreadystatechange = function () {
    if(request.readyState == 4){
        alert(request.responseText);
    }
}
request.send(null);

valexchao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 核心技术

ajax Asynchronous JavaScript and XML异步的Js 和XMLWeb2.0的核心技术，不用刷新整个页面，只对局部更新，节省带宽，提高加载速度，改善用户体验。例子如weibo的点赞按钮核心异步数据获取技术XMLHttpRequest 对象2.1创建XMLHttpRequset对象request = new XMLH
复制链接

扫一扫