javascriptajax 基础 --本文转载

Posted 奔跑的葛根

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascriptajax 基础 --本文转载相关的知识,希望对你有一定的参考价值。

什么是 ajax

ajax 即“Asynchronous javascript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。

http 请求

首先需要了解 http 请求的方法(GET 和 POST)。

GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。

POST 用于上传数据。POST 安全性一般,容量几乎无限。

ajax 请求

ajax 请求一般分成 4 个步骤。

1、创建 ajax 对象

在创建对象时,有兼容问题:

var oAjax = new XMLHttpRequest();   //for ie6 以上
var oAjax = new ActiveXObject(\'Microsoft.XMLHTTP\'); //for ie6

合并上面的代码:

复制代码
var oAjax = null;
if(window.XMLHttpRequest){
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObject(\'Microsoft.XMLHTTP\');
}
复制代码

2、连接服务器

在这里会用到 open() 方法。open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。

oAjax.open(\'GET\', url, true);

3、发送请求

send() 方法。

oAjax.send();

4、接收返回值

onreadystatechange 事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState:请求状态,返回的是整数(0-4)。

0(未初始化):还没有调用 open() 方法。

1(载入):已调用 send() 方法,正在发送请求。

2(载入完成):send() 方法完成,已收到全部响应内容。

3(解析):正在解析响应内容。

4(完成):响应内容解析完成,可以在客户端调用。

status:请求结果,返回 200 或者 404。

200 => 成功。

404 => 失败。

responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。

复制代码
oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4){
        if(oAjax.status==200){
            fnSucc(oAjax.responseText);
        }else{
            if(fnFaild){
                fnFaild();
            }
        }
    }
};
复制代码

将以上代码进行封装:

复制代码
function ajax(url, fnSucc, fnFaild){
    //1.创建对象
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
      
    //2.连接服务器  
    oAjax.open(\'GET\', url, true);   //open(方法, url, 是否异步)
      
    //3.发送请求  
    oAjax.send();
      
    //4.接收返回
    oAjax.onreadystatechange = function(){  //OnReadyStateChange事件
        if(oAjax.readyState == 4){  //4为完成
            if(oAjax.status == 200){    //200为成功
                fnSucc(oAjax.responseText) 
            }else{
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    };
}
复制代码

最后附上实例:

复制代码
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ajax基础</title>
</head>
<body>
    点击按钮的时候,读取abc.txt<input id="btn" type="button" value="读取"/><br/>
    <div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById(\'btn\');
    var oCon = document.getElementById(\'con\');
    oBtn.onclick = function(){
        ajax(\'abc.txt\',function(str){
            oCon.innerHTML = str;
        });
    }
}
</script>
复制代码

abc.txt 内容:

这是ajax调用的内容1。
这是ajax调用的内容2。
这是ajax调用的内容3。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body>

    <a href="#" onclick="Fetch(\'1\')">1</a>
    <a href="post.php?id=2">2</a>
    <a href="post.php?id=3">3</a>
<div id="show"></div>
</body>
</html>
<script>
var xmlHttp;
function S_xmlhttprequest()
{
    if(window.ActiveXObject)
        {xmlHttp = new ActiveXObject(\'Microsoft.XMLHTTP\');//alert("IE浏览器!");
        }
    else if(window.XMLHttpRequest)
        {xmlHttp = new XMLHttpRequest();//alert("非IE浏览器!");
        }
}

function Fetch(url)
{
    S_xmlhttprequest();
    xmlHttp.open("get","post.php?id="+url,true);
    xmlHttp.onreadystatechange = Response;
    xmlHttp.send(null);
}

function Response()
{
    if(xmlHttp.readyState == 1)
    {
        document.getElementById(\'show\').innerHTML = "loading...";
    }
    if(xmlHttp.readyState == 4)
    {
       if(xmlHttp.Status == 200)
           {
           var v = xmlHttp.responseText;
           document.getElementById("show").innerHTML = v;
           }
    }
}
</script>


<?php
$id = $_GET[\'id\'];
sleep(2);  //停顿两秒,显示loading……效果,但是只有IE9可以,Chrome和Opera不行,不知为何
if($id)
{
    for($i = 0; $i < 10; $i++)
         echo $id;
}
exit();
?>

 

以上是关于javascriptajax 基础 --本文转载的主要内容,如果未能解决你的问题,请参考以下文章

最新JavaScriptAjax典藏级学习资料下载分类汇总 (2011年12月21日更新)

javascript之基础篇

在纯javascript ajax中捕获跨域响应[重复]

使用 Javascript Ajax 调用的 Azure 机器学习

显示所有ajax请求的加载图标

PhoneGap 登录错误