Ajax异步提交笔记

1,Ajax
　　AJAX = 异步 JavaScript 和 XML。 Asynchronous JavaScript and XML
　　XMLHttpRequest 对象 (异步的与服务器交换数据)
　　JavaScript/DOM (信息显示/交互)
　　CSS (给数据定义样式)
　　XML (作为转换数据的格式)

2,XMLHttpRequest
　　创建XMLHttpRequest的语法
　　IE5和IE6:
　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　新版本IE和其他浏览器 IE7+, Firefox, Chrome, Opera, Safari
　　xmlhttp=new XMLHttpRequest();
　　====>

var xmlhttp;
if (window.XMLHttpRequest){
　　// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
　　xmlhttp=new XMLHttpRequest();
} else {
　　// IE6, IE5 浏览器执行代码
　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3,XMLHttpRequest 常用的方法和属性
方法:
　　open() : 用于创建一个新的HTTP请求,并指定此请求的方法,URL,是否异步提交及验证信息
　　send() : 发送请求到服务器端
　　abort() : 取消当前请求
　　setRequestHeader() : 单独指定请求的某个HTTP头
　　getResponseHeader() : 从响应中获取指定的HTTP头
　　getAllResponseHeaders() : 获取响应的所有HTTP头
属性:
　　readyState : 返回请求的当前状态, readyState 常用值0表示未初始化,1表示初始化,2表示发送数据,3表示数据传送中,4表示数据接收完毕
　　status : 返回当前请求的HTTP状态码, status常用值200表示正确返回,404表示找不到访问对象
　　responseText : 以文本形式获取响应值
　　responseXML : 以xml形式获取响应值,并且解析成DOM对象返回
　　statusText : 返回当前请求的响应行状态
　　onreadystatechange : 设置回调函数
4,向服务器发送请求
　　xmlhttp.open("GET","ajax_info.txt",true);
　　xmlhttp.send();
　　open(method,url,async)
　　method：请求的类型；GET 或 POST
　　url：文件在服务器上的位置
　　async：true（异步）或 false（同步）
　　send(string)
　　string：仅用于 POST 请求 ,GET请求为空或null
GET 还是 POST？
以下情况中，请使用 POST 请求：
　　无法使用缓存文件（更新服务器上的文件或数据库）
　　向服务器发送大量数据（POST 没有数据量限制）
　　发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get 请求:
　　xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
　　xmlhttp.send();
post 请求:
　　xmlhttp.open("POST","/try/ajax/demo_post.php",true);
　　xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
　　xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
　　xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　xmlhttp.send("fname=Henry&lname=Ford");
5,AJAX - 服务器 响应
　　responseText 获得字符串形式的响应数据。
　　responseXML 获得 XML 形式的响应数据。
　　1): responseText 属性
　　if (xmlhttp.readyState==4 && xmlhttp.status==200){
　　　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
　　}
　　2): responseXML 属性

　　if (xmlhttp.readyState==4 && xmlhttp.status==200){
　　　　var xmlDoc=xmlhttp.responseXML;
　　　　var txt="";
　　if(xmlDoc){
　　　　var x=xmlDoc.getElementsByTagName("ARTIST");
　　　　if (x.length > 0){
　　　　　　for (i=0;i<x.length;i++){
　　　　　　　　txt=txt + x[i].childNodes[0].nodeValue + "<br>";
　　　　　　}
　　　　}
　　}
　　document.getElementById("myDiv").innerHTML=txt;
　　}

　　XmlDocument 对象的常用属性
　　attributes : 当前节点的属性集合
　　childNodes : 当前节点的所有子节点
　　firstChild : 节点的第一个子节点
　　XmlDocument 对象的常用方法
　　getElementsByTagName() : 用来获取指定节点名的节点对象集合,参数为节点名称字符串
　　selectSingleNode() : 用来获取符合条件的第一个节点对象
　　selectNodes() : 用来获取符合条件的节点对象集合

6,原生ajax

 1    <script type="text/javascript">
 2        function ajax(){
 3            var username=document.getElementsByName("username")[0].value;
 4            //发送Ajax请求
 5            //1.创建XMLHttpRequest对象
 6            var xmlHttpRequest=createXMLHttpRequest();
 7            //2.设置回调函数，用来返回数据
 8            xmlHttpRequest.onreadystatechange=callBack;
 9            //3.初始化xmlHttpRequest
10            xmlHttpRequest.open("GET","UserServlet?username="+username,true);
11            //4.发送请求
12            xmlHttpRequest.send(null);
13            //回调函数
14            function callBack(){
15                var data=xmlHttpRequest.responseText;
16                var sp=document.getElementById("sp");
17                if(data=="true"){
18                    sp.innerHTML="用户名可用";
19                }else{
20                    sp.innerHTML="该用户已存在";
21                }
22            }
23        }
24        function createXMLHttpRequest(){
25            //1.判断浏览器类型是否是IE6以上或者其他浏览器
26            if(window.XMLHttpRequest){
27                return new XMLHttpRequest();
28            }else{
29                //如果为flase，则为IE6及以下
30                return new ActiveXObject();
31            }
32        }
33    </script>

　　　//接收方法　

　　　　String username=request.getParameter("username");
　　　　System.out.println(username);
　　　　//实例化PrintWriter对象返回数据
　　　　PrintWriter out=response.getWriter();
　　　　if("admin".equals(username)){
　　　　　　out.print(false);
　　　　}else{
　　　　　　out.print(true);
　　　　}

7,jQuery简化Ajax使用

 1     <script type="text/javascript">
 2         $(function(){
 3             $("#username").blur(function(){
 4                 var username=document.getElementsByName("username")[0].value;
 5                 //发送Ajax
 6                 $.ajax({
 7                     url:"UserServlet",
 8                     type:"GET",
 9                     data:"username="+username,
10                     dataType:"text",
11                     success:callBack
12                 });
13                 function callBack(data){
14                     if(data=="true"){
15                         $("#sp").html("该用户名可用");
16                     }else{
17                         $("#sp").html("该用户名以被使用");
18                     }
19                 }
20             });
21         });
22     </script>

8,简化

 1 //第一个参数是url，第二个是发送的数据,第三个回调函数,最后一个是回调类型,数据的发送形式为get提交
 2 $.get("UserServlet","username="+username+"&message="+message,callBack,"json");
 3 //发送请求的方式变成post提交
 4 $.post("UserServlet",{username:username,message:message},callBack,"json");
 5 //当请求方式为get，回调json时候可以使用这种
 6 $.getJSON("UserServlet",{username:username,message:message},callBack);
 7
 8     //fastJSON
 9     String json=JSON.toJSONString(list,true);
10     System.out.println(json);
11     response.setContentType("text/html;charset=utf-8");
12     PrintWriter out =response.getWriter();
13     out.print(json);
14     out.flush();

9,提交form表单

<script type="text/javascript">
     $(function(){
         $("#btn").click(function(){
             /* //将表单数据序列化
             var form=$("#form").serializeArray();
             //将表单数据转化为name=value的形式
             var formString=$.param(form); */
             var formString=$("#form").serialize();
             $.post("UserServlet",formString,callBack,"JSON");
             function callBack(data){
                 $("#div").append("<ul><li>用户名:"+data.username+"</li><li>密码:"+data.password+"</li><li>性别:"
                         +data.gender+"</li><li>年龄:"+data.age+"</li><li>电话:"+data.phone+"</li><li>地址:"
                         +data.address+"</li></ul>");
             }
         });
     });
</script>
</head>
<body>
   <form action="" id="form">
       <span>用户名:</span><input type="text" name="username"><br>
       <span>密码:</span><input type="password" name="password"><br>
       <span>性别:</span><input type="radio" name="gender" value="男" checked="checked">男&nbsp;
                         <input type="radio" name="gender" value="女">女<br>
      <span>年龄:</span><input type="text" name="age"><br>
      <span>电话:</span><input type="text" name="phone"><br>
      <span>地址:</span><textarea rows="4" cols="50" name="address"></textarea><br>
      <input type="button" value="取值" id="btn">
   </form>
   <div id="div">
   </div>
</body>

    User user=new User(username, password, gender, age, phone, address);
    //转化为json数据
    String json=JSON.toJSONString(user);
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out=response.getWriter();
    out.print(json);
    out.flush();
时间： 2024-10-26 17:15:25

Ajax异步提交笔记的相关文章

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

AJAX异步提交，浏览器总跳出下载界面

问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是 AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是 换了xml,txt,jaon 等格式试了个遍,最后还是没解决.后来翻到这篇帖子,才明白: http://www.jb51.net/article/32540.htm,我们先看看我的代码: 下面是

ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般注册都需要用户填一个验证码信息(防止机器恶意注册),并且这个验证码会提交到后台去进行比对,若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误.若是简单地用form表单直接将数据提交到指定的url,当验证码填写错误的信息返回浏览器端的时候,不可避免整个页面都会重新刷新一次,这是用户所不想要

Ajax异步提交登录(2)--登录使用

http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在接收到请求后,将需要的结果,再传回到前台,这样就可以实现不需要页面的转发,数据实现来回传递,从而实现页面无刷新. 基于这个原理,我想到使用Ajax传输登录的信息,包括错误信息,功能很强大,保证绝对的用户友好型. 2.使用Ajax异步提交登录可以实现功能:可以提示用户名错误,可以提示用户名正确但是密码

AJAX异步提交（前端）

/*AJAX异步提交*/ /*1.声明一个AJAX全局变量*/ var ajaxRequest; function checkAjAx() { /*2.创建XMLHttpRequest*/ ajaxRequest=new XMLHttpRequest(); /*3.配置请求对象*/ var url="user.do?uname="+$("uname").value()+"times="+new Date().getMilliseconds();

form表单submit提交内容，跟ajax异步提交form表单的区别，

因为开发一个小细节,本来是上传文件,填写文件名进行ajax提交,但是没有获取到文件的绝对地址, 所以使用了form表单提交文件,然后又觉得form表单+ajax提交联系起来比较好,不用改动太多代码. 区别: Form表单提交:一般都会进行页面跳转: Ajax异步提交:可以不进行页面跳转: Form表单提交 <body> <div id="forms”> <form id="form1" action="/users/login"

extJs常用的四种Ajax异步提交 - haiq - 博客园

/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */ function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_save.action', method : 'post', params : { userName : document.getElementById('userName').value, passwor

extJs常用的四种Ajax异步提交

/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return entitySearch.firstname:document.all.firstname.value, */function saveUser_ajaxSubmit1() { Ext.Ajax.request( {  url : 'user_save.action',  method : 'post',  params : {   user

MVC之AJAX异步提交表单

第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8