ajax初学

最新推荐文章于 2021-08-06 02:26:00 发布

u010250476

最新推荐文章于 2021-08-06 02:26:00 发布

阅读量82

点赞数

分类专栏： JS 文章标签： Ajax 操作步骤

本文链接：https://blog.csdn.net/u010250476/article/details/84413152

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax操作步骤
1.创建XMLHttpRequest对象
除老版本ie(IE5，IE5.5，IE6)外，其他现代浏览器都内建XMLHttpRequest对象。
创建XMLHttpRequest对象前先检查浏览器支持哪种对象创建方式。
var xmlHttp = false;//用于存储XMLHttpRequest对象
var createXmlHttp = function(){
    //针对老版本ie(IE5，IE5.5，IE6)
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e2) {
            xmlHttp = false;
        }
    }
    //针对IE7+, Firefox, Chrome, Opera, Safari
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    //不支持的浏览器
    if(xmlHttp==undefined||xmlHttp==null){
            alert("error!");
       }
};

2.设置要发送到服务器的请求，调用XMLHttpRequest对象的open()方法。
open(method,url,async);
参数解释
method:为请求的类型：GET或POST；
GET方式提交参数列表存放在url中，大小限制在1kb下，同时参数将被显示在地址栏中，并被浏览器缓存。
所以为了避免得到浏览器缓存的结果，使用GET方式时想URL添加唯一标识，日期或随机数；
例如：xmlHttp.open("GET","test.jsp?t="+Math.random(),true);
使用GET方式需要处理参数中文问题，url = encodeURL(url);
服务器端处理参数乱码问题：value = new String(value.getBytes("iso-8859-1"),"UTF-8");

POST方式提交时浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，
而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
使用POST方式时需要设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.
通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")
例如：xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

url:为请求的路径地址可以为任何类型的文件，发送方式为GET时后接参数列表如：url ? name='name' & pwd='pwd';
其中url指向路径为Servlet时该url为Servlet路径名不要'/'；

async:true或false?;
async设置为true时表示允许发送异步请求，用于AJAX，默认，需要设置回调函数；
设置为true时JS无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本；
当响应就绪后对响应进行处理。

async为false时JS会等到服务器响应就绪后才继续执行，一般不推荐使用，不需要设置回调函数。

3.执行发送请求，调用XMLHttpRequest对象的send()方法；
send(string);
string:仅用于post方式提交，发送要提交到服务器的参数列表的等信息；
get情况下使用send(null),null表示firefox和ie都支持发送；

4.利用xmlHttp的onreadystatechange事件来监视xmlHttp.readyState的状态，每次改变都调用回调函数；
例如：xmlHttp.onreadystatechange = callBack;
XMLHttpRequest对象的三个重要属性：
onreadystatechange：存储函数，每当readyState属性改变时，就会调用该函数；
readyState:存有XMLHttpRequest的状态，从0到4变化；
0：请求为初始化；
1：服务器连接已建立；
2：请求已接受；
3：请求处理中；
4：请求已完成，且响应已就绪。
status:xmlHttpRequest的交互状态，其值有;
200：请求成功；
202：请求被接受，但未被完成；
404：请求资源未找到；
500：内部服务器错误。

5.在回调函数中处理返回值；
如果要接受来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性；

login.jsp
<html>
<head>
   <script type="text/javascript" src="ajaxConf.js"></script>
    <title>login</title>

</head>

<body>
    <form name="" action="" >
        用户名：<input type="text" name="userName" id="userName"><div id="show"></div><br/>
        <input type="button" value="Click" οnclick="check()">
    </form>
</body>
</html>

ajaxConf.js
var xmlHttp = false;
var createXmlHttp = function(){
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e2) {
            xmlHttp = false;
        }
    }
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    if(xmlHttp==undefined||xmlHttp==null){
            alert("error!");
       }
};

var check = function(){
    createXmlHttp();
    alert(xmlHttp);
    var userName = document.getElementById("userName");
    var url = "checkAjax?userName="+userName+"&btn=check";
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = callBack;

};

var callBack = function(){
    if (xmlHttp.readyState == 4) {
        alert(xmlHttp.status);
        if (xmlHttp.status == 200) {
            var message = xmlHttp.responseText;
            var show = document.getElementById("show");
            show.innerHTML = message;
        }
    }
};

checkAjax.java
public class checkAjax extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String userName = request.getParameter("userName");
        String btn = request.getParameter("btn");
        if(btn!=null && btn.equals("check"))
            if(userName==null) {
                out.print("用户名不能为空");
            } else {
                if (userName.equals("wangjue"))
                    out.print("用户名"+userName+"已被使用");
                else
                    out.print("用户名可以使用");

            }
        out.close();
    }
}

u010250476

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax初学

Ajax操作步骤1.创建XMLHttpRequest对象除老版本ie(IE5，IE5.5，IE6)外，其他现代浏览器都内建XMLHttpRequest对象。创建XMLHttpRequest对象前先检查浏览器支持哪种对象创建方式。var xmlHttp = false;//用于存储XMLHttpRequest对象var createXmlHttp = function(){ //针对老版本ie...
复制链接

扫一扫