初认识ajax

来源：互联网发布：无锡日语培训知乎编辑：程序博客网时间：2024/06/08 13:54

在网页中，有一些需求需要开发者实现在不刷新页面的同时请求来自于服务器的内容，要实现这样一个功能，就必须要用到ajax这样一个技术。

ajax，亦就是异步JavaScript和XML，通过在后台和服务器进行少量数据的交换，从而达到更新网页页面的内容。

1、XMLHttpRequest对象

XMLHttpRequest对象是整一个ajax的基础，ajax就是通过这一个对象来跟后台服务器进行数据交换。

var xmlhttp = new XMLHttpRequest();

通过以上的语句来创建一个XMLHttpRequest对象。

由于浏览器兼容器的问题，有一些浏览器不支持XMLHttpRequest对象，所以必须要创建ActiveXObject，使用方法如下：

var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

2、用ajax实现post、get方法

//获取xmlHttpRequest对象function getxmlhttp(){if (window.XMLHttpRequest){  return new XMLHttpRequest();  }else  {  return new ActiveXObject("Microsoft.XMLHTTP");  }}function getServer(){var xmlhttp = getxmlhttp();xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    //get the value   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;    }  }  //open("GET"/"POST", url, true/false);xmlhttp.open("GET","gethint.asp?q="+str,true);xmlhttp.send();}

上面的代码通过ajax对服务器"gethint.asp?q=str进行访问，将取得的值返回到浏览器中。

3、JQuery中的$.ajax()方法的使用

$.ajax({   url:serverurl+requesturl,   type:"POST",   contentType:"application/x-www-form-urlencoded; charset=utf-8",   dataType:"json",   data:{name:$("#name").val(),password:$("#password").val()},   success: function(rdata){var username=rdata.username;   setCache(cachename,{name:$("#name").val(),password:$("#password").val()});    window.location.href="${serverurl}/wx/basic";    }});

参数说明:

url:请求的服务器地址

type:表示与服务器交互的类型，分别有"post"和"get"等

dataType：预期服务器返回值的类型，在上面的例子中，返回的为json类型

data：发送到服务器的内容

success：请求成功调用的方法

error:请求失败调用的方法

0 0