zoukankan      html  css  js  c++  java
  • Ajax的同步与异步

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
     
    默认情况下,ajax是异步的。情形如下:当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
     
    当ajax为同步时,当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
     
    <html>
    <head>
    <script>
    function showHint(str)
    {
    	if (str.length==0)
    	{ 
    		document.getElementById("txtHint").innerHTML="";
    		return;
    	}
    	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","gethint.php?q="+str,true); // 异步
    	xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <p><b>在输入框中输入一个姓名:</b></p>
    <form> 
    姓名: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>返回值: <span id="txtHint"></span></p>
    
    </body>
    </html>
  • 相关阅读:
    288 Node.js模块化开发:js开发弊端,模块的概念,模块成员导出的2种方式及其区别,模块成员导入
    287 Node.js快速入门:Node.js 的组成,Node.js基础语法,Node.js全局对象global
    286 Node开发概述,Node运行环境搭建以及安装失败解决办法
    285 H5 Web Workers
    使用nvm安装nodejs
    函数式 UI:Web开发终于摆脱了框架的束缚
    Vue渲染函数
    微信小程序使用canvas实现生成海报图的功能
    Vue中插槽指令
    Vue之nextTick原理
  • 原文地址:https://www.cnblogs.com/peteremperor/p/6180241.html
Copyright © 2011-2022 走看看