总结-javascript-ajax

<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;
}

/**
* 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>

巴特西

总结-javascript-ajax

最新文章

热门文章