码迷,mamicode.com
首页 > Web开发 > 详细

Ajax笔记1

时间:2017-10-09 20:52:10      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:bsp   方法   刷新   enc   html4   jquer   tran   创建   异步   

Ajax用于与服务器进行异步交互,实现页面的动态局部刷新,Ajax有一个关键对象XMLHttpRequest,学习Ajax关键是掌握XMLHttpRequest的操作方法

Ajax的使用步骤

1.创建XMLHttpRequest对象

Ajax有一个关键的对象XMLHttpRequest,不同浏览器对该对象的创建方式不一样

//一般浏览器支持下面这种方式
var xhr = new XMLHttpRequest();
//IE6,IE5支持下面这种方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

在JavaScript中可以对此创建方法进行封装,代码如下:

function getXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else{
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

还有另一种方式

function getXhr(){
    try{
        return new XMLHttpRequest();
    }catch(e){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
            throw e;
            }
        }
    }
}

2.与服务器建立连接

创建对象之后,要使用xhr.open(method, url, asyc)打开与服务器的连接,

open这个方法有三个参数:

1.第一个参数是请求方式:可以是"GET"或"POST",注意是字符串形式

2.第二个参数是请求的url:可以是servlet的地址

3.第三个参数是是否异步请求:true代表异步请求,false代表非异步请求

注意:当请求方式为为“POST”时,要设置请求头

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

3.向服务器发送请求

建立连接之后,使用xhr.send(context)向服务器发送请求,参数为请求体

不同的请求方式,会send的参数会有所不同。

1.当请求方式是“GET”时,参数应该写“null”,即

xhr.send(null); 

2.当请求方式是“POST”时,参数是请求体。当用户登陆时,可以用下面这种方式发送用户信息

xhr.send("username=example&passwd=123456677")

4.获取请求结果

此时要监听XMLHttpRequest的onreadystatechange事件,然后执行一些响应事件

这一步还要知道三个XMLHttpRequest的四个属性:

1.readyState

XMLHttpRequest对象存在五个状态,具体请看http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

五个状态分别对应数字0,1,2,3,4。具体应用中只需要关心4这个状态,代表着请求已完成,且响应已就绪

2.status

这个属性代表服务器的响应状态码,常见的状态码有200,404,500。

使用给属性时一般使用200这个状态码,代表着服务器响应完成

3.responseText

通过它得到服务器响应的文本内容

4.responseXML

通过它得到服务器响应的xml内容

代码实例:

//得到xmlHttp对象的状态:
var state = xhr.readyState;
//得到服务器响应的状态码:
var status = xhr.status;
//得到服务器响应的内容
var content = xhr.responseText; //得到服务器响应的文本内容
var content = xhr.responseXML; //得到服务器响应的xml内容

Ajax应用实例

首先编写一个AjaxServlet,这里使用doGet方法处理请求,返回“ajax test”文本内容

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().print("ajax test");
}

 再编写一个ajaxtest.jsp页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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=ISO-8859-1"> 
<title>Insert title here</title>
</head>
<script type="text/javascript">
//创建XMLHttpRequest对象function getXhr(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
//文档加载完毕时执行以下内容
window.onload = function(){
    var butt = document.getElementById("button");
    butt.onclick = function(){
        var xmlHttp = getXmlHttp();
        xmlHttp.open("GET","<c:url value=‘/AjaxServlet‘/>",true);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function(){
            //readyState==4时,表示服务器响应结束;status==200时,表示服务器响应完成
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var content = xmlHttp.responseText;
                var elem = document.getElementById("div");
                elem.innerHTML = content;
            }
        };
    };
};
</script>
<body>
    <button id="button">send request</button>
    <div id="div"></div>
</body>
</html>

 

 运行程序

技术分享

点击按钮之后

技术分享

 下一篇记录对ajax的封装,JQuery的ajax()方法就对Ajax进行了很好的封装

Ajax笔记1

标签:bsp   方法   刷新   enc   html4   jquer   tran   创建   异步   

原文地址:http://www.cnblogs.com/songzj/p/7641986.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!