JavaScript——Ajax基础二

编写Ajax——1

创建Ajax对象
ActiveXObject(“Microsoft.XMLHTTP”)
XMLHttpRequest()
在IE6下不兼容


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<script type="text/javascript"> window.onload = function (){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //创建AJAX对象 if (window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } alert(oAjax); } } script>
head>
<body>
    <input type="button" id="btn1" value="读取" />
body>
html>

当if中使用的是XMLHttpRequest,那么就是一个没有定义的变量,在浏览器中会报错,但若使用的是window.XMLHttpRequest,那就是一个没有定义的属性,在浏览器中不会报错,只会underfined。

显示结果为object XMLHttpRequest
连接服务器
open(方法,文件名,异步传输)
同步与异步
同步:事件依次进行
异步:事件同时进行
发送请求
send()
接收返回值


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<script type="text/javascript"> window.onload = function (){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //创建AJAX对象 if (XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //连接服务器 oAjax.open('GET','a.txt?t=' + new Date().getTime(),true); //发送请求 oAjax.send(); //接收返回值 oAjax.onreadystatechange = function(){ //oAjax.readyState 可以知道浏览器与服务器进行到哪一步了 if (oAjax.readyState == 4) //读取完成 { if (oAjax.status == 200) { alert('成功' + oAjax.responseText); } else { alert('失败'); } } } } } script>
head>
<body>
    <input type="button" id="btn1" value="读取" />
body>
html>

数字表示对象:
0 (未初始化)还没有调用open()方法;
1 (载入)已调用send()方法,正在发生请求;
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
封装函数

function ajax(url, fnSucc, fnFaild){
    if (XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //连接服务器
    oAjax.open('GET',url,true);

    //发送请求
    oAjax.send();

    //接收返回值
    oAjax.onreadystatechange = function(){
        //oAjax.readyState 可以知道浏览器与服务器进行到哪一步了
        if (oAjax.readyState == 4) //读取完成
        {
            if (oAjax.status == 200) {
                fnSucc(oAjax.responseText);
            } else {
                if (fnFaild) {
                    fnFaild(oAjax.status);
                };
            }
        }
    }
}

Ajax数据

数据类型
什么叫做数据类型——英语、中文
XML、Json
字符集
所有文件字符集相同

你可能感兴趣的:(JavaScript基础)