AJAX实现异步提交

原创 2016年08月29日 23:21:44
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表示返回的信息。




版权声明:本文为柠檬需要糖原创文章,未经博主允许不得转载。

Ajax 异步提交方法

Ajax 异步提交方法  function addMailTracking(){ //$("#WayBillsingleFrom").valid();     var flightno=$("...
  • yang_best
  • yang_best
  • 2014年10月24日 17:28
  • 2462

jQuery异步提交表单(有实例)

前言:我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:前提准备:引入脚本 ...
  • xinghuo0007
  • xinghuo0007
  • 2017年05月30日 00:11
  • 1374

Ajax提交form表单

高校平台项目中采用的UI框架为DWZ框架,这个框架有一个很灵活又很让人头疼的问题,那就是它的div碎片。 所谓的div碎片指的是每一个jsp页面不再是一个单纯的jsp了,此时的jsp只不过是一个div...
  • a1314517love
  • a1314517love
  • 2014年03月12日 20:54
  • 27288

纯javascript的ajax实现php异步提交表单

很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想...
  • yipiankongbai
  • yipiankongbai
  • 2013年09月03日 23:09
  • 9471

MVC之AJAX异步表单

曾经学习过AJAX,不是特别的熟悉,这次利用学习MVC的机会,好好的体验了一把,非常感谢《MVC开发实战》这本书,看了有两三遍,才算对MVC整个运行的机制有了一定的了解,下面来分享下我们经常在开发时用...
  • ZHOUCHAOQIANG
  • ZHOUCHAOQIANG
  • 2014年12月10日 20:17
  • 1863

ajax案例---以GET和POST方式异步提交数据给后台

前台页面代码 ajax demo var xmlHttpRequest = null; function ajaxSubmit(){ // window.al...
  • Geek_ymv
  • Geek_ymv
  • 2014年04月27日 17:46
  • 10819

表单提交前onclick使用reuturn时,ajax请求同步异步的一点注意事项

因为会经常用到ajax提交请求判断一些信息,比如,用户账号名是否存在等等,但如果是在提交表单数据按钮的onclick时,用return check()来跳转去最后验证一下表单数据是否为空等等。需要注意...
  • u011088792
  • u011088792
  • 2017年07月12日 17:28
  • 580

ajax异步请求提交上传图片表单并预览图片

一、表单上传文件必须加上enctype="multipart/form-data",(以下是上传文件的表单) UploadImage" method="post" id="uploadForm" ...
  • dsl815721035
  • dsl815721035
  • 2016年10月23日 12:09
  • 16247

js登录特效+ajax提交表单+异步刷新验证

今天成功测试一种js登录特效+ajax提交表单+异步刷新验证,登录时特效提醒,无刷新ajax提交表单,获取验证结果,跳转正式页面:废话不多说,先直接分享代码: 1、主界面index.php  加载的...
  • hpugym
  • hpugym
  • 2016年01月08日 16:45
  • 2686

ajax的异步提交以及返回数据的处理,重点json

在工作中,因为种种原因我需要用到了ajax,本身是一个java工程师,但是做java的并不是一辈子写后台,特别是如今的b/s架构,所以通过自身学习了ajax,废话不多扯,看下面。 1.首先我们需要...
  • u012745028
  • u012745028
  • 2015年05月12日 20:57
  • 1494
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX实现异步提交
举报原因:
原因补充:

(最多只允许输入30个字)