ajax基础——如何用原生js封装一个ajax函数

来源：互联网发布：vb.net 多线程实例编辑：程序博客网时间：2024/06/15 17:13

Demo 如下：

要实现的效果是

在一个页面里，放置一个文本输入框

输入框的右方，显示用户名是否正确

<!DOCTYPE html>

<html>

<head>

</head>

<body>

用户名：<input type="text"name="" id="username" /><span id="inf"></span><br />

密码：<input type="password"name="" /><input type="submit" value="注册"/>

</form>

</body>

</html>

由于我是在本地服务器上测试

所以我封装了几个方便的工具可用使用：

一、打开页面自动跳转的本地服务器的地址栏（不用重复修改）；

/**
* 自动跳转到location/项目名/页面.html
*/
var toLocationHtmlHandler=setInterval(function(){
/*
* 1.获取当前网页地址，转换成字符串
* 2.在网址字符串中查找‘localhost’，用作判断
* 3.将网址字符串分割，历遍字符串保留最后两位重组，改成localhost/+项目名/页面.html
*/
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');

var address='http://localhost';

//length-2视路径而定，如果项目在更深的路径如location/项目分类/项目名/页面.html，则length-3，如此类推
for (var i=addr.length-2,len=addr.length;i<len;i++) {

address=address+'/'+addr[i];
}
if (urlstring!==address&&server<0) {
location.href=address;
}
clearInterval(toLocationHtmlHandler);
},1);

二、经典的获取对象id的函数，减少重复代码

function id(id){

return document.getElementById(id);

}

ajax函数的组成步骤

第一步：

新建一个ajax对象

functionajax(){

varoAjax =new XMLHttpRequest();

}

由于XMLHttpRequest(); ie6不兼容

所以考虑ie6的兼容写法是

function ajax(){

varoAjax;

if(window.XMLHttpRequest){

oAjax=new XMLHttpRequest();

}else{

oAjax=newActiveXObject('Microsoft.XMLHTTP');

}

returnoAjax;

}

第二步：发送请求

有两种方式

第一种GET的方式：

var xhr=ajax();

调用上面写好的ajax对象;

var url='/checkName.php?name='+id('username').value;

发送 id:username的输入框内的内容到/checkName.php路径上

xhr.open('GET',url,true);

调用open函数GET的方式会直接在地址栏上显示，安全性较低

而且传输上限被URL所限制，完整的URL最高为255个字节

open函数的true属性指的是异步传输，这种传输方式无刷新同时处理多个请求，比较效率

open函数的false属性指的是同步传输，这种传输方式需刷新而且一次只能处理一个请求，用户体验较差

也许只有需要限制传输数据时，而且多页面的判定一步步走的流程可能会用到

xhr.send(null);

由于URL路径传输，不需要调用send函数

在本地服务器，写一个php文件，文件名为checkName.php 文件名与类型要和路径相同

接收方式为GET

<?php

header('content-type:text/html;charset=utf-8');

header("Cache-Control:no-cache");

$username=$_GET['name'];

if($username=='admin'){

echo'该用户名不合法';

}

elseif($username=='Dorothy'){

echo'该用户名已经被注册';

}

elseif($username==''){

echo'';

}

else{

echo '该用户名可用注册';

}

第二种POST的方式：

var xhr=ajax();

调用上面写好的ajax对象;

var url='/checkName1.php';

发送的路径为/checkName1.php

xhr.open('POST',url,true);

调用open函数POST的方式，路径与数据分离，不会再URL上直接显示，安全性略高

而且不受URL大小的限制，数据传输上限只和服务器有关

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

设定POST请求的类型

var data='name='+id('username').value;

获取要发送的数据

xhr.send(data);

调用send发送数据

在本地服务器，写一个php文件，文件名为checkName1.php文件名与类型要和路径相同

接收方式为POST

<?php

header('content-type:text/html;charset=utf-8');

header("Cache-Control:no-cache");

$username=$_POST['name'];

if($username=='admin'){

echo'该用户名不合法';

}

elseif($username=='Dorothy'){

echo'该用户名已经被注册';

}

elseif($username==''){

echo'';

}

else{

echo '该用户名可用注册';

}

第三步：服务器响应

xhr.onreadystatechange=function(){

if(xhr.readyState==4) {

readyState=4时请求发送完成

if(xhr.status==200) {

status=200时服务器响应完成

var datum;
定义一个变量datum获取服务器返回的数据

datum=xhr.responseText;

服务器数据为html或text文件等一般文件时用responseText;

if(xhr.responseXML) {

datum=xhr.responseXML;

服务器数据为XML文件时用responseXML;

}

第四步：dom操作

把获得的数据进行dom操作在页面输出

id('inf').innerHTML=datum;

要写在服务器响应的函数内：

xhr.onreadystatechange=function(){

if(xhr.readyState==4) {

if(xhr.status==200) {

var datum;

datum=xhr.responseText;

if(xhr.responseXML) {

datum=xhr.responseXML;

id('inf').innerHTML=datum;

}

GET方式的Demo完整版

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text"name="" id="username" /><span id="inf"></span><br />
密码：<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(){
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
return oAjax;
}
id('username').oninput=function(){
var xhr=ajax();
var url='/checkName.php?name='+id('username').value;
xhr.open('GET',url,true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var datum;
datum=xhr.responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
}
id('inf').innerHTML=datum;
}
}
}
}
</script>
</html>

POST方式的Demo完整版

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text"name="" id="username" /><span id="inf"></span><br />
密码：<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(){
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
return oAjax;
}
id('username').oninput=function(){
var xhr=ajax();
var url='/checkName1.php';
xhr.open('POST',url,true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var data='name='+id('username').value;
xhr.send(data);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var datum;
datum=xhr.responseText;
if(xhr.responseXML) {
datum=xhr.responseXML;
}
id('inf').innerHTML=datum;
}
}
}
}
</script>
</html>

注意以上Demo的PHP文和HTML件我都放在服务器的根目录下，如无响应优先检查路径是否正确

最后：把上述步骤封装成一个ajax函数

由上述可知封装 ajax 函数需要的参数有4个

发送的方式 method

发送的路径 url

发送的数据 data

请求成功时dom操作的函数 fnsuccess

function ajax(method,url,data,fnsuccess) {

第一步：新建一个ajax对象；

var xhr;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=newActiveXObject('Microsoft.XMLHTTP');

}

第二步：发送的两种形式，用if区分并兼容

xhr.open(method,url,true);

if(method=='GET'&&data) {

url=url+'?'+data;

xhr.open(method,url,true);

xhr.send(null);

}else{

xhr.open(method,url,true);

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.send(data);

}

第三步：发送服务器请求和等待服务器响应

xhr.onreadystatechange=function(){

if(xhr.readyState==4) {

if(xhr.status==200) {

第四步：回调函数返回数据，方便dom操作在函数外进行

if(fnsuccess) {

var response=xhr.responseText;

if(xhr.responseXML) {

response=xhr.responseXML;

}

fnsuccess(response);

}

封装完成的原生ajax函数应用的Demo完整版

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
用户名：<input type="text"name="" id="username" /><span id="inf"></span><br />
密码：<input type="password"name="" /><input type="submit" value="注册"/>
</form>
</body>
<script type="text/javascript">
var url=window.location;
var urlstring=url+'';
var server=urlstring.indexOf('localhost');
var addr=urlstring.split('/');
var address='http://localhost';
for (var i=4,len=addr.length;i<len;i++) {
address=address+'/'+addr[i];
}
if(urlstring!==address&&server<0) {
location.href=address;
}
function id(id){
return document.getElementById(id);
}
function ajax(method,url,data,fnsuccess) {
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(method,url,true);
if(method=='GET'&&data) {
url=url+'?'+data;
xhr.open(method,url,true);
xhr.send(null);
}else{
xhr.open(method,url,true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
if(fnsuccess) {
var response=xhr.responseText;
if(xhr.responseXML) {
response=xhr.responseXML;
}
fnsuccess(response);
}
}
}
}
}
id('username').oninput=function(){
var data='name='+id('username').value.trim();
ajax('GET','/checkName.php',data,function(a){
id('inf').innerHTML=a;
});
}
</script>
</html>

阅读全文

0 0