Ajax的使用

最新推荐文章于 2022-05-04 09:33:04 发布

hanhan313

最新推荐文章于 2022-05-04 09:33:04 发布

阅读量558

点赞数 1

分类专栏：学习笔记文章标签： ajax xmlhttprequest jquery function javascript 服务器

本文链接：https://blog.csdn.net/hanhan313/article/details/8014989

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用Ajax技术实现异步交互

– 创建XMLHttpRequest对象

– 通过 XMLHttpRequest对象设置请求信息

– 向服务器发送请求

– 创建回调函数，根据响应状态动态更新页面

常见属性见下图

Javascript中创建一个ajax函数:

var xmlhttp; 定义xmlhttp变量来保存xmlHttpRequest对象

function doAjax(url) {
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        try {
// Msxml2.XMLHTTP和Microsoft.XMLHTTP都是针对IE浏览器的，但是XMLHttpRequest针对火狐和谷歌浏览器的
           xmhttp = new XMLHttpRequest();
           if (xmlhttp.overrideMimeType) {
              xmlhttp.overrideMimeType("text/xml");
           }
        } catch (e) {       }
      }
   }

  //为ajax指定回调函数，所谓的回调函数就是当使用ajax向服务器发送请求之后还必须要指定函数来处理响应的结果，方法后不需要括号
    xmlhttp.onreadystatechange = processRequest;
   //open方法是建立与服务器的连接，参数是提交的方式，请求的地址和是否已异步的方式提交
   xmlhttp.open("post", url, true);
   //如果以post方式请求，必须设置头信息
xmlhttp.setRequestHeader("Content-type",
        "application/x-www-form-urlencoded");
   xmlhttp.send(null);
//注意:如果是以get方式提交，如果需要发送参数的话则需要加到open的参数url后面xmlhttp.send(null)中的参数置空即可，但是如果是post方式，参数则需要在xmlhttp.send()的参数中设置要发送的参数  比如: xmlhttp.send(id=5&type=update);
}
回调方法processRequest
function processRequest() {
   var messdiv = document.getElementById(“mess”)；
   if (xmlhttp.readyState == 4) 
if (xmlhttp.status == 200) {
//responseText表示请求完成后，返回的字符串信息    
      if (xmlhttp.responseText == "false")
           messdiv.innerHTML = "用户名可以使用";              else
           messdiv.innerHTML = "用户名已被使用";          } else {
        alert("请求处理返回的数据有错误");         
      }
   }
}

以上就是使用javascript实现的ajax

但是在有了jQuery之后ajax的实现就方便很多了下面介绍下使用jQuery来实现ajax，代码就相对简洁多了

在使用jQuery时必须先要下载jQuery库，百度链接地址

http://pan.baidu.com/share/link?shareid=65372&uk=909074031

function login()
{
//变量issave是获取是否保存信息
  var issave=$("#issave").attr("checked")?1:0;
$.post("LoginServlet",{nameid:$("#nameid").val(),passwordid:$("#passwordid").val(),chmima:issave},function(data){
  if(data==0)
     {
 $("#top_login").html("欢迎您:"+$("#nameid").val()+"   <a href=\"loginout.jsp\">退出</a");
     }
     else
     {
        alert("登入失败!");
     }
  });
}

jQuery中有使用$.post()来发送请求信息的，也可以使用$.get()方法，都是差不多的 post方法有三个参数

参数一:url 请求的url地址

参数二:url的参数{参数名:参数值} 多个的话用逗号隔开

参数三:function(data){} 参数data就是服务器响应的结果信息，在函数体中就可以进行相应的操作了

使用jQuery的方法实现ajax是比上面的方法简介多了