AJAX的基本讲解

2025-04-06 17:27:00

1、首先,新建一个html文档,书写一个input输入框和一个span,代码如下:<html><bo颊俄岿髭dy><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,书写代码:<?phpif($_GET["c"]==""){ //如果$_GET["c"]为空 echo "empty"; //就输出empty}else{ //否则 echo $_GET["c"]; //输出发送过来的数据}?>效果如图:

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