Ajax速学(自用小笔记)

素颜马尾好姑娘i 2022-05-21 07:51 162阅读 0赞

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

setTimeout(code,millisec)  执行一次函数   code  必需,要调用的函数后执行的js    millisec  在执行代码前需要等待时间

setInterval(code,millisec)   一直循环执行函数 code  必需,要调用的函数后执行的js    millisec  在执行代码前需要等待时间

**创建XMLHttpRequest对象**

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

*variable*=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

*variable*=new ActiveXObject("Microsoft.XMLHTTP");

如下区分不同的浏览器的代码:

var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

**向服务器发送请求**

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax\_info.txt",true);  
xmlhttp.send();

**open("GET","ajax\_info.txt",true);**  
第一个参数:请求类型GET或者Post  第二参数:文在在服务器的位置  第三参数: true(异步)或者 false(同步)

带参数请求:

/\*拼接带参数\*/

xmlhttp . open ( " GET " , " /try/ajax/demo\_get.php?t= "  \+  Math . random ( ) , true ) ;

xmlhttp . send ( ) ;

/\*直接带参数\*/

xmlhttp . open ( " GET " , " /try/ajax/demo\_get2.php?fname=Henry&lname=Ford " , true ) ;

xmlhttp . send ( ) ;

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp . open ( " POST " , " /try/ajax/demo\_post2.php " , true ) ; //post请求

xmlhttp . setRequestHeader ( " Content-type " , " application/x-www-form-urlencoded " ) ; //请求头

xmlhttp . send ( " fname=Henry&lname=Ford " ) ; //参数

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

<table style="border:0px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr style="border-top:0px;background-color:rgb(246,244,240);"> 
   <th style="border-color:rgb(85,85,85);font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;width:175px;">属性</th> 
   <th style="border-color:rgb(85,85,85);font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">描述</th> 
  </tr> 
  <tr style="border-top:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">responseText</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">获得字符串形式的响应数据。</td> 
  </tr> 
  <tr style="border-top:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">responseXML</td> 
   <td style="border-color:rgb(212,212,212);font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">获得 XML 形式的响应数据。</td> 
  </tr> 
 </tbody> 
</table>

## 获得服务器返回的值: ##

xmlhttp . open ( " GET " , " /try/ajax/ajax\_info.txt " , false ) ;

xmlhttp . send ( ) ;

document . getElementById ( " myDiv " ) . innerHTML = xmlhttp . responseText ;

## onreadystatechange 事件 ##

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

## 栗子: ##

xmlhttp . onreadystatechange = function ( )

if  ( xmlhttp . readyState == 4  &&  xmlhttp . status == 200 )

document . getElementById ( " myDiv " ) . innerHTML = xmlhttp . responseText ;

## 多个Ajax需要使用时创建  ##

/*通用的Ajax的函数方法*/
    var xmlhttp;
    function loadXMLDoc(url,cfunc)
    {
    if (window.XMLHttpRequest)
      {
      xmlhttp=new XMLHttpRequest();
      }
    else
      {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }

function myFunction()
    {
    	loadXMLDoc("/try/ajax/ajax_info.txt",function()
    	{
    		if (xmlhttp.readyState==4 && xmlhttp.status==200)
    		{
    			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    		}
    	});
    }

## 举一个栗子: ##

# #

<html   lang="en">
    
    <head>
    		<meta charset="UTF-8">
    		
    		<style>
    		.bodys{
                width: auto;
                height: 100px;
            }
    		</style>
    		
    						
    		 <script type="text/javascript">
    			function loadXMLDoc()
    				{
    					/*进行嵌套的话就会出现只执行一次的嵌套的php代码*/
    				/*	document.getElementById("txtHint").innerHTML="<?php echo date('y-m-d h:i:s',time());?>";  */
    						
    					      var xmlhttp;
    						  if (window.XMLHttpRequest)
    						  {
    							// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    							xmlhttp=new XMLHttpRequest();
    						  }
    						  else
    						  {
    							// IE6, IE5 浏览器执行代码
    							xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    						  }
    						  xmlhttp.onreadystatechange=function()
    						  {
    							if (xmlhttp.readyState==4 && xmlhttp.status==200)
    							{
    							  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    							}
    						  }
    						  xmlhttp.open("GET","main.php",true);
    						  xmlhttp.send();
    
    						
    						  
    				}
    				
    							
       
       /*实现刷新多少次的时间*/
            function countDown(secs){
    
    			var jumpToS = document.getElementById('jumpToS');
    			
    			var xmlhttp=new XMLHttpRequest();
    
                if(--secs>0){
    				/* secs在执行代码前需要等待的毫秒数  */
                    setTimeout("countDown("+secs+")",1000);
    				
    				xmlhttp.onreadystatechange=function()
    				{
    				document.getElementById("jumpToS").innerHTML=xmlhttp.responseText;
    				}
                }
               			
    			xmlhttp.open("GET","main.php",true);
    			xmlhttp.send();
            }
      
    			</script>
    		
    </head>
    
    <body>
    
    <h2>我是AjaxDemo</h2>
    
    <div class="bodys"   id="txtHint"><h2>使用 AJAX 修改该文本内容</h2></div>
    
    <div   class="bodys"><h2>我是调用的PHP的Time函数:<span id="jumpToS">0</span><script type="text/javascript">countDown(100);</script></h2></div>
    
    <div   class="bodys">
    <button type="button" οnclick="loadXMLDoc()">修改内容</button>
    </div>
    
    </body>
    
    </html>

main.php

<?php
    
     echo date('y-m-d h:i:s',time());
    
    ?>

嗯,大概基础就是这些了..................用的话就,看需求了