ajax基础入门

在前辈们的经验基础上刚学习了ajax，总结分享下自己的学习，方便后面的人学习。
先看一下ajax最基础的例子，访问静态文件。
要有一个静态文件，我的是a.txt
a.txt内容：

这是一个txt文本，用于ajax异步刷新

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
    function loadXmlDoc(){
        var xmlhttp;
        // 创建一个XMLHttpRequest对象，用于 IE7+, Firefox, Chrome
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }else {//这个用于老版本浏览器 IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //当xmlhttp的状态值改变时，执行下面方法
        xmlhttp.onreadystatechange=function(){
            //当解析响应完成并且数据交易成功时，执行下面步骤
            if(xmlhttp.readyState==4&&xmlhttp.status==200{
            //将id为mydiv的div内容替换为文本内容
                document.getElementById("mydiv").innerHTML=
                xmlhttp.responseText;
            }
        }
        /* 参数1：method,请求发送的方式：GET/POST
         * 参数2：url,访问的路径,这里访问的是静态文本
         * 参数3：async，请求是否异步发生， false，请求是同步的，
         *  true 或省略，请求是异步的
         */
        xmlhttp.open("GET","a.txt",true);
        //这个就见名知意了，发送请求
        xmlhttp.send();
    }
</script>
</head>
<body>
<h1>ajax入门实现</h1>
<input type="text" />
<button onclick="loadXmlDoc()">ajax异步刷新</button>
<div id="mydiv"></div>
</body>
</html>

实现效果
这里写图片描述
说一下状态值(readyState)和状态码(status)：

readyState：
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

status：比较多，很多很罕见，介绍一些常见的
200 - 交易成功
304 - 客户端已经执行了GET，但文件未变化，就是说它是个静态文件，已经缓存了
404 - 没有发现文件、查询或URl
500 - 服务器产生内部错误

这个基础的ajax就实现了，下一个是Ajax+Struts2+JQuery+json的实现方法

猜你喜欢