Ajax速学(自用小笔记)

最新推荐文章于 2023-06-20 11:47:50 发布

Mr_木木好木

最新推荐文章于 2023-06-20 11:47:50 发布

阅读量277

点赞数

分类专栏： Ajax 文章标签： javascript php Ajax 异步刷新

本文链接：https://blog.csdn.net/qq_39444779/article/details/80897308

版权

Ajax 专栏收录该内容

1 篇文章 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 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

获得服务器返回的值:

 
   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());

?>

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

Mr_木木好木

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax速学(自用小笔记)

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 setTimeout(code,millisec) 执行一次函数 code 必需,要调用的函数后执行的js millisec 在执行代码前需要等待时...
复制链接

扫一扫