AJAX实现异步提交

发布时间：2020-12-16 01:30:12 所属栏目：百科来源：网络整理

导读：AJAX的工作流程 XMLHttpReques对象常用属性 readyState 返回请求的当前状态，每次状态改变都会改变此值常用值： 0--未开始化 1--开始发送请求 2--请求发送完成 3--开始读取响应 4--读取响应结束 status 返回当前请求的HTTP代码状态常用值： 200--正确返回

AJAX的工作流程

XMLHttpReques对象常用属性

readyState	返回请求的当前状态，每次状态改变都会改变此值常用值： 0--未开始化 1--开始发送请求 2--请求发送完成 3--开始读取响应 4--读取响应结束
status	返回当前请求的HTTP代码状态常用值： 200--正确返回 404--找不到访问对象
responseText	以文本形式获取响应值
responseXML	以XML形式获取相应值，并且解析成DOM对象返回
statusText	返回当前的响应行状态
onreadystatechange	设置回调函数

XMLHttpReques对象常用方法

open(method,url,async,user,password)	用于创建一个新的HTTP请求参数method：设置HTTP请求方法，比如GET POST等参数url：请求的URL地址参数async：可选，指定请求是否为异步方法，默认为true 参数user：可选，如果服务器需要验证，此处需要指定用户名参数password：可选，指定服务器的密码。
send(data)	发送请求到服务端如果是POST请求需要填写参数，如果是GET则为null
abort()	取消当前请求
setRequestHeader(header,value)	单独设置请求的某个HTTP头信息 header：要指定的HTTP头名称 value：指定HTTP头名称对应的值
getResponseHeader(headerName)	从响应中获取指定的HTTP头信息
getAllResponseHeaders()	获取响应所有HTTP头信息

使用javascript来实现异步提交

<script>
    var xmlHttpRequest;
    function ajaxTest() {
        //创建 xmlHttpRequest 对象
        if (window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
        } else {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
        }

        //设置回调函数
        xmlHttpRequest.onreadystatechange = call;

        //初始化xmlHttpRequest
        xmlHttpRequest.open("GET","url",true);
          //GET 使用GET方式访问,这里也可以设置成POST
          //url url地址，也可以是带有参数的url地址
          //true(默认值) 指定此请求是否为异步方法。

        //提交请求
        xmlHttpRequest.send(null);
          //由于我们是通过GET请求，地址栏传递参方式请求的所以为null
          //如果为POST方式则需要指定参数,参数为String类型.

      }

      function call() {
          //获取文本响应值,此值可以自定义
          if (xmlHttpRequest.responseText == "true"){

          }


      }
</script>

使用jquery实现异步提交(在jquery中封装了上面的代码)

$.ajax({
                type:"POST",url:"check_user.jsp",data:"name" + uname,dataType:"html",success:function (mas) {
                    if ($.trim(mas) == "true"){
                        $("#user_info").html("★ 用户名被使用");//用户名被使用
                    } else {
                        $("#user_info").html("☆ 可以注册");
                    }
                }
            });

type：提交方式 url：提交地址 data：提交参数 dataType：返回消息类型 success：成功后调用函数。mas表示返回的信息。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!