总结-javascript-ajax

时间:2022-01-14 05:57:44

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
 $(function() {
  // load方法:向服务器发送异步请求,并且将服务器返回的数据直接添加到符合要求的节点之上。
  $('#btn1').click(function() {
   // load方法如果没有请求参数,会发送get请求,如果有请求参数,则会发送post请求。当不需要传参的时候,发送get请求就方便了。
   // 也可以这样的参数形式:name=llj&age=55
   $('#tips').load('/ace/ajax.servlet', {
    username : $('#username').val()
   });
  });

// $.get()方法
  $('#btn2').click(function() {
   $.get('/ace/ajax.servlet', {
    username : $('#username').val()
   }, function(data, statusText) {
    $('#tips').html(data);
   }, 'text');
//     最后一个参数:服务器返回的数据类型,可以是:
//     text : 普通的文本
//     html :  html文档
//     json :   json字符串
//     xml :   xml文档
//     script: javascript脚本
  });

// $.post()方法
  $('#btn3').click(function() {
   $.post('/ace/ajax.servlet', {
    username : $('#username').val()
   }, function(data, statusText) {
    $('#tips').html(data);
   }, 'text');
  });

// $.ajax()方法
  $('#btn4').click(function() {
   $.ajax({
    url : '/ace/ajax.servlet', // js中,属性可以不用 ' '  JSON里面必须要 ' '
    type : 'get', // 默认是get方式
    data : 'username=' + $('#username').val(),
    dataType : 'text',
    success : function(data) {
     $('#tips').html(data);
    },
    error : function() {
     alert('ERROR!');
    },
    async : true // async: 当值为true(缺省值),表示发送异步请求。当值为false,表示发送同步请求。
   });
  });

// $.getJSON
  $('#btn5').click(function() {
   $.getJSON('/ace/ajax.servlet?act=1', {}, function(data) {
    alert(data);
   });
  });

// $.ajax()方法对keyup事件的应用
  $('#username').keyup(function() {
   $.ajax({
    url : '/ace/ajax.servlet',
    type : 'get',
    data : 'username=' + $('#username').val(),
    dataType : 'text',
    success : function(data) {
     $('#tips').html(data);
    },
    error : function() {
     alert('ERROR!');
    },
    async : true
   });
  });

// $.ajax()方法对input(propertychange)事件的应用
  var event = 'input'; // 非IE浏览器 - input事件
  if (window.navigator.userAgent.indexOf('MSIE') != -1) {
   event = 'propertychange'; // IE浏览器 - propertychange事件
  }
  $('#username2').bind(event, fn);
  function fn() {
   $.ajax({
    url : '/ace/ajax.servlet',
    data : 'username=' + $('#username2').val(),
    success : function(data) {
     $('#tips').html(data);
    }
   });
  }

});
</script>
<script type="text/javascript">
 /**
  * 获取AJAX对象 <br>
  * AJAX:asynchronous javascript and xml <br>
  * ajax是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest对象,<br>
  * 一般称之为ajax对象)异步地(当ajax对象发请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它的操作)向服务器发请求,<br>
  * 服务器送回部分数据( 并不是一个完整的页面),利用这些数据更新当前页面。整个过程,页面无刷新,不打断用户的操作。<br>
  */
 function getXhr() {
  var xhr = null;
  if (window.XMLHttpRequest) {
   xhr = new XMLHttpRequest(); // 非IE浏览器
  } else {
   xhr = new ActiveXObject("Microsoft.XMLHttp"); // IE浏览器
  }
  return xhr;
 }

function xhrExample() {
  function post() {
   var xhr = getXhr();
   xhr.open('post', 'test.servlet', 'true');
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 消息头
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
     var txt = xhr.responseText;
    }
   };
   xhr.send("time=" + mf("timer").innerHTML);
  }

function get() {
   var xhr = getXhr();
   xhr.open('GET', 'test.servlet?actionMethod=GET', 'true');
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
     var txt = xhr.responseText;
    }
   };
   xhr.send(null);
  }
 }

/**
  * ajax提交表单的两种方法
  */
 function func1() {
  $.ajax({
   url : 'test.servlet',
   type : 'post',
   data : $('#form').serialize(),
   dataType : 'text',
   success : function(data) {
   },
   error : function() {
   }
  });
 }

// 需要jquery.form.js
 function func2() {
  var options = {
   url : 'test.servlet',
   type : 'post',
   data : null,
   success : function(data) {
   }
  };
  var form = $("#form");// form1:表单ID 在表单界面只用这一个表单ID
  form.ajaxSubmit(options);
 }
</script>
</head>
<body>
 <h3>jQuery对AJAX的支持演示 -- load、$.get()、$.post()、$.ajax()</h3>
 <form>
  用户名1: <input id="username" /> keyup事件 <span id="tips" style="font-size: 32pt; color: cyan;"></span>
  <br>
  <br>
  用户名2: <input id="username2" /> input(propertychange)事件
  <br>
  <br>
  <input type="button" value="click me(load)" id="btn1" />
  <input type="button" value="click me($get)" id="btn2" />
  <input type="button" value="click me($post)" id="btn3" />
  <input type="button" value="click me($.ajax)" id="btn4" />
  <input type="button" value="click me($.getJSON)" id="btn5" />
  <br>
 </form>
</body>
</html>