Ajax实现--javascript

Ajax技术的好处我想我们已经不需要再过多陈述了，ajax技术现在已经被广泛运用在web应用中，比如google地图，省市级联等等

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

废话不多说，现在先用纯javascript来实现一下ajax技术

首先是jsp页面：

<html><head><script type="text/javascript">var xmlHttpRequest = null;function ajaxRequest(){if(window.ActiveXObject) // IE浏览器
        {xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
        {xmlHttpRequest = new XMLHttpRequest();}if(null != xmlHttpRequest){var v1 = document.getElementById("value1").value;var v2 = document.getElementById("value2").value;// 准备向服务器发出一个请求/** GET方式向服务器发出一个请求* xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);*//** POST方式向服务器发出一个请求*/xmlHttpRequest.open("POST", "AjaxServlet", true);// 当发生状态变化时就调用这个回调函数
            xmlHttpRequest.onreadystatechange = ajaxCallBack;// 使用post提交时必须加上下面这行代码
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 向服务器发出一个请求
            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);    }}function ajaxCallBack(){if(xmlHttpRequest.readyState == 4){if(xmlHttpRequest.status == 200){var content = xmlHttpRequest.responseText;document.getElementById("div1").innerHTML = content;}}}</script></head><body><input type="button" value="get content from serve" onclick="ajaxRequest()"/><br><input type="text" id="value1"/><br><input type="text" id="value2"/><div id="div1"></div></body>
</html>

服务端的servlet非常简单，就是响应给客户端一段文本内容。

ajax技术的核心就是xmlHttpRequest，对于IE来说，因为其内核与其他浏览器不一样(Firefox, Chrome)，所以首先要判断一下使用的浏览器是否是IE

        if(window.ActiveXObject) // IE浏览器{xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest) // 除IE以外的其他浏览器{xmlHttpRequest = new XMLHttpRequest();}

这样得到xmlHttpRequest以后，接下来的操作在上面代码里都有体现，流程无非就是像servlet发送请求，然后根据响应状态的转变调用回调函数，最后得到服务器端响应回来的数据，响应过来的既可以是xml文本，还可以是json数据或者是普通文本，

转载于:https://www.cnblogs.com/xiaoluo501395377/archive/2012/10/28/2743181.html

Ajax实现--javascript相关推荐

网页制作中最有用的免费Ajax和JavaScript代码库
本文中,小编整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messenger 它是最流行和常用的Ajax代码解决 ...
js ajax通用方法,目前5个流行的AJAX调用JavaScript库
在这篇文章中,我们将看一些用于进行AJAX调用的最好的JavaScript库,包括jQuery,Axios和Fetch. AJAX是由客户端框架和库用来对服务器进行异步HTTP调用的一组Web开发技术 ...
[Ajax]异步的 JavaScript 和 XML：Ajax入门教程（整理）
首先先来解释一下什么是 AJAX . 简单来说AJAX = 异步 JavaScript 和 XML, 是一种用于创建快速动态网页的技术. 它不是一种编程语言,而是一种规范. Ajax的主要功能是:通过 ...
ASP.NET培训资料(课堂视频)(AJAX,C#,JavaScript,SQL)
ASP.NET培训资料视频(含笔记)(AJAX,C#,JavaScript,SQL) 详细的资料三个月的课程录像+资料笔记(花了一万六千块的培训资料超值) [19G的经典内容] 认真学习后包你能成为 ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
AJAX (异步 javascript 和 xml)
用 form 可以发请求,但是会刷新页面或新开页面用 a 可以发 get 请求,但是也会刷新页面或新开页面用 img 可以发 get 请求,但是只能以图片的形式展示用 link 可以发 get ...
prototype.js ajax.request,javascript – Prototype和Ajax.Request范围
我在原型的Ajax.Request类中获取正确的范围时遇到了麻烦.我要做的是编写一个包含ajax请求的简单API: API = Class.create({ initialize:function(a ...
AJAX(Asynchronous JavaScript And XML，异步JavaScript + XML)
AJAX,最初是由Adaptive Path公司的Jesse James Garrett提出来的.AJAX的工作原理相当于在用户和服务器之间加了-个中间层,使用户操作与服务器响应异步化. Jesse ...
AJAX与JavaScript脚本语言
上一篇博客中提到了ajax并非是一种新的技术,而是几种原有技术的结合体,XMLHttpRequest对象是AJAX的核心技术,而JavaScript也起到了不小的作用,XMLHttpRequest对象 ...
js ajax 递归,javascript ajax循环请求/ 长轮询终极解决办法——递归
ajax循环请求,不能使用for循环,原因如下: 1. 因为ajax是异步执行,在还没有拿到服务器响应内容,就进入下一个for循环中解决办法:递归currentIndex = 0; function ...

Ajax实现--javascript

Ajax实现--javascript相关推荐

最新文章

热门文章