Ajax初使用

最新推荐文章于 2024-11-12 23:26:42 发布

木子木泗

最新推荐文章于 2024-11-12 23:26:42 发布

阅读量215

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/u010758410/article/details/75247481

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用Ajax的几种方式

原生Ajax

<html>
  <body>
    输入用户名：<input type="text"/>单击检查按钮后，立即查检结果
    <input type="button" value="检查"/>
    <hr/>
    <div>
        <!-- 显示结果 -->
    </div>
    <script type="text/javascript">
        document.getElementsByTagName("input")[1].onclick=function(){
            //取得用户输入的用户名
            var username = document.getElementsByTagName("input")[0].value;
            //对中文编码
            username = encodeURI(username);
            //创建AJAX引警对象
            var xhr = createXHR();
            //设置函数监听
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //以字符串形式接收
                        //var msg = xhr.responseText;

                        //以XML形式接收
                        var xmlDocument = xhr.responseXML;
                        var resElement = xmlDocument.getElementsByTagName("res")[0];
                        var msg = resElement.firstChild.nodeValue;          
                        var divElement = document.getElementsByTagName("div")[0];
                        divElement.innerHTML = "<img src='"+msg+"'/>";
                    }
                }
            }

            //准备以POST方式发送请求
            xhr.open("post","/day31/PostServlet?time="+new Date().getTime());

            //设置请求头，只有是POST方式下，才设置该请求头
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //真正发送请求
            xhr.send("username="+username);
        }
        function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    window.alert("你的浏览器太差");
                }
            }
            return xhr;
        }
    </script>
  </body>
</html>

jQuery.ajax(url,[settings])

$.ajax(选项);
            选项:
                url:"/store/xxx",
                type:"get",
                data:"username=tom",
                success:function(obj){},
                error:function(){},
                dataType:"json",
                async:true

jQuery.get(url, [data], [callback], [type])

jQuery.post(url, [data], [callback], [type])

$.get(url,params,function(data){},type);
$.post(url,params,function(data){},type);

木子木泗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录