基础ajax应用

前端之家收集整理的这篇文章主要介绍了基础ajax应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. function createXMLHttpRequest(){
  2. var xhr = null;
  3. try{
  4. xhr = new XMLHttpRequest();
  5. }catch(e){
  6. var MSXML =
  7. ['abc','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
  8. //IE7.0以下的 浏览器以ActiveX组件的方式来创建
  9. for ( var i = 0; i < MSXML.length; i++) {
  10. try {
  11. xhr = new ActiveXObject(MSXML[i]);
  12. break;
  13. } catch(ex){
  14. }
  15. }
  16. }
  17. return xhr;
  18. }
  19.  
  20. function ajaxGet(){
  21. //1.创建XMLHttpRequest对象
  22. var xhr = createXMLHttpRequest();
  23. //2.创建一个新的http请求,但是没有发送该请求,并指定此请求的方法和url
  24. /**
  25. * 参数一:http方法例如POST、GET、PUT及DELETE
  26. * 参数二:请求的URL地址,可以为绝对地址也可以为相对地址,但是必须是本域路径
  27. * 参数三:指定此请求是否为异步方式,默认为true.一般都为true
  28. */
  29. xhr.open("GET","/AjaxServlet?username=admin&__task="+new Date().getTime(),true);
  30. //指定当readyState属性改变时的事件处理函数
  31. /**
  32. * 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法
  33. 1 (初始化) 对象已建立,已经调用open方法,尚未调用send方法
  34. 2 (发送数据) send方法调用,但是当前的状态及http头未知
  35. 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseText获取部分数据会出现错误
  36. 4 (完成) 数据接收完毕,此时可以通过通过responseText获取完整的回应数据
  37. */
  38. xhr.onreadystatechange = function(){
  39. //数据接收完毕
  40. if(xhr.readyState==4 && (xhr.status==200||xhr.status==304)){
  41. var result = xhr.responseText;
  42. document.getElementById("msg").innerHTML = result;
  43. }
  44. };
  45. //3.发送请求到http服务器并接收回应
  46. /**
  47. * 参数一:只对post有效
  48. */
  49. xhr.send(null);
  50. }
  51.  
  52.  
  53.  
  54.  
  55. function ajaxPost(){
  56. //创建ajax对象
  57. var xhr = createXMLHttpRequest();
  58. //创建http请求
  59. xhr.open("POST","/AjaxServlet"/*,true*/);
  60. //如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
  61. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  62. xhr.onreadystatechange = function(){
  63. if(xhr.readyState==4 && xhr.status==200){
  64. var result = xhr.responseText;
  65. if(result=="true"){
  66. location.href="index.html";
  67. }else{
  68. alert("登录失败");
  69. }
  70. }
  71. };
  72. //参数格式为url方式 http://localhost/AjaxServlet?userName=admin&password=123456
  73. xhr.send("userName=adminx&password=123456");
  74. }

猜你在找的Ajax相关文章