初学者必读原生AJAX-异步的javaScript和XML

Posted 多情剑客无情剑;

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学者必读原生AJAX-异步的javaScript和XML相关的知识,希望对你有一定的参考价值。

1.前台页面

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

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

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

</form>

action="#" 是提交到本个页面内

 

2.在head标签元素加入AJAX代码

其实这个AJAX功能即是这个check(str)函数

这个函数的功能即是:传入一个字符串HELLO到后台服务器中,后台的程序经过处理之后(假设这个程序的功能即是大写转换成小写)再把hello传给这个函数,然后这个函数负责把这个responseTest   hello插入到innerhtml文档之中

这个实现AJAX的函数功能即是:传入字符串HELLO -------用open或者send方法把这个HELLO传到后台的处理程序

----后台处理程序把大写换成小写hello------然后这个函数用document.getElementById("show").innerHTML=x.responseText;把处理好的hello插入到HTML页面之中

去讯和面试第一次听说阿贾克斯,本质就是一个函数,和后台交互的函数

<script type="text/javascript">

    function check(str){

    if(window.XMLHttpRequest){         
        var x=new XMLHttpRequest();   //创建对象x
    }else{
        var x=new ActiveXObject("Microsoft.XMLHTTP");
    }


    x.open("GET","test2.php?c="+str+"&q="+new Date(),true);//open方法客户端准备发送给test2.php处理
    x.send();     //客户端发送。这2步就是请求request

    x.onreadystatechange=function ff(){
        if(x.readyState==4 && x.status==200){//客户端判断条件
    //客户端显示
       document.getElementById("show").innerHTML=x.responseText;
  }  
}                
}     
</script>                            

 

3.后台程序

<?php
if($_GET["c"]==""){  //如果$_GET["c"]为空
echo "empty";    //就输出empty
}else{     //否则
echo $_GET["c"];     //输出发送过来的数据
}
?>

 

以上是关于初学者必读原生AJAX-异步的javaScript和XML的主要内容,如果未能解决你的问题,请参考以下文章

原生Ajax书写

异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例

云原生初学者入门必读

使用原生JavaScript发送ajax请求

Ajax-原生Ajax详解-同步与异步底层

初学Ajax