AJAX的基本讲解

2025-09-25 02:38:54

1、首先,新建一个html文档,书写一个input输入框和一个span,代码如下:

<html>

<body>

<form action="#" method="post">

姓名<input type="text" name="first" id="first" />

<span id="show"></span>

</form>

</body>

</html>

网页效果如图:

AJAX的基本讲解

2、接下来,在body里面创建ajax脚本,代码如下:

<html>

<body>

<script type="text/javascript">

function check(str){

if(window.XMLHttpRequest){

var x=new XMLHttpRequest();   //创建对象

}else{

var x=new ActiveXObject("Microsoft.XMLHTTP");

}

x.open("GET","test2.php?c="+str+"&q="+new Date(),true);                 //客户端准备,发送给test2.php进行处理

x.send();                 //客户端发送

x.onreadystatechange=function ff(){

if(x.readyState==4 && x.status==200){//客户端判断条件

 //客户端显示

 document.getElementById("show").innerHTML=x.responseText;

}  

}                

            

}     

</script>

<form action="#" method="post">

姓名<input type="text" name="first" id="first" />

<span id="show"></span>

</form>

</body>

</html>

3、分析:这个check();是一个函数。

因为要发送给test2.php进行处理,所以我们还要创建test2.php,书写代码:

<?php

if($_GET["c"]==""){  //如果$_GET["c"]为空

echo "empty";    //就输出empty

}else{     //否则

echo $_GET["c"];     //输出发送过来的数据

}

?>

效果如图:

AJAX的基本讲解

AJAX的基本讲解

AJAX的基本讲解

AJAX的基本讲解

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:77
  • 阅读量:54
  • 阅读量:43
  • 阅读量:74
  • 阅读量:44
  • 猜你喜欢