Ajax入门 01

什么是ajax?

Asynchronous JavaScript And XML  异步JavaScript和XML  ,创建交互式的网页开发技术

是属于客户端与服务器之间交互的一种技术

与传统的交互比较

传统的交互(整个页面刷新+请求和响应同步处理)

        浏览器发请求-->tomcat-->tomcat响应给浏览器-->jsp servlet处理 -->返回响应浏览器显示响应结果

使用Ajax交互(局部刷新和异步处理)

        客户请求-->XMLHttpRequest发请求-->到tomcat-->XMLHttpRequest接受结果-->显示浏览器

Ajax好处

局部刷新和异步处理

提高了程序的交互效率(传递数量少)

提高用户体验(避免了整个页面的频繁刷新)

Ajax原理

Ajax是一系列技术的综合运用

基于js去发送请求和响应处理

以XMLHttpRequest对象为核心

涉及Html css 页面渲染技术

涉及xml,json等数据交互格式

//servlet响应设置字符: res.setContentType("text/plain;charset=utf-8");

使用JavaScript创建XMLHttpRequest

<!-- 获取xmlHttpRequest -->

<script type="text/javascript">

//创建XmlHTTPRequest

function getXhr(){

var xhr;

if(window.XMLHttpRequest){ //判断浏览器,是否是ie的老版本

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

return xhr;

}

</script>

    测试 <a href="#" onclick="getXhr()">查看上证指数</a>

发送Http请求

function sendRequest() {

var xhr = getXhr();

xhr.open("get","demo1.do",true);//创建一个http请求

xhr.send(null);//发送http请求

}

回调函数

        function sendRequest() {
            var xhr = getXhr();
            xhr.open("get","demo1.do",true);//创建一个http请求
            //注册一个回调函数,请求处理完成之后调用
            xhr.onreadystatechange= function(){
                if(xhr.readyState==4){//请求处理完毕
                    //获取服务器返回的信息
                    var msg =xhr.responseText;
                    //将消息放到span  span的id叫msg
                    document.getElementById("msg").innerHTML=msg;
                }    
            };
            xhr.send(null);//发送http请求
        }

注释:

readyState: 0,1,2,3,4     4就是请求处理完毕

responseText 获取服务器返回的文本

responseXML 获取服务器返回的XML