AJAX知识总结

来源:互联网 发布:gopro 软件 编辑:程序博客网 时间:2024/05/18 02:24

分为JS原生和JQ版本,当作最近学习的一个总结吧。

1.js实现,就拿写的注册时输入完用户名之后验证是否已存在来说:

(CSDN的编辑器真的难用)

    <script type="text/javascript">
        function checkUpName(str){
            if(str.length==0){
                document.getElementById("mySpan").innerHTML="请填写用户名";
            }else{
                var xmlhttp;
                if (window.XMLHttpRequest){
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function(){
//判断连接建立
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        if(xmlhttp.responseText==1){
                           document.getElementById("mySpan").innerHTML="用户名可用"
                        }
                        if(xmlhttp.responseText==0){
                            document.getElementById("mySpan").innerHTML="用户名已被占用"
                        }
                    }
                };
                //请求指令加上输入框的值q
                xmlhttp.open("GET","register2.php?q="+str,true);
                //发送请求指令
                xmlhttp.send();
            }
        }
    </script>



xmlhttp.readyState==4 ;
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
xmlhttp.status==200;
HTTP常见状态码:
200 OK
301 客户请求的文档在其他地方
302 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。
304 服务器告诉客户,原来缓冲的文档还可以继续使用。
400 Bad Request 语法错误,服务器不能理解
401 Unauthorized 未通过密码验证
403 Forbidden  资源不可用
404 Not Found 
410 Gone 请求的文档已经不再可用
500 Internal Server Error 服务器错误
505 服务器只支持请求的HTTP版本号

2.jQ版本:

$(selector).load(URL,data,callback);

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$("#div1").load("demo_test.txt #p1");

把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

callback中包含:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象(xhr.status 、xhr.statusText等)



jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);



jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。


$.post(URL,data,callback);

data数据为json格式。



原创粉丝点击