ajax,我目前的理解是:异步响应,能跟服务器交互。可以在不将所有的数据提交的情况下,也能够将需要验证的数据提交到后台,并能将服务器返回的信息显示到界面中。
三步:
1、:创建XMLHTTPRequest对象;
<script type="text/javascript">
//定义了XMLHttpRequest对象
var request;
//创建XMLHttpRequest对象函数
function getRequestObject() {
if (window.ActiveXObject) {
request=new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
request=new XMLHttpRequest();
} else {
window.alert("你的浏览器不支持XMLHTTPRequest,将无使用AJAX功能!");
}
}
</script>
2、写回调函数
function processResult() {
if ((request.readyState == 4) &&
(request.status == 200)) {
//1.弹出对话框以便调试
alert("服务器返回的是: "+request.responseText);//request.responseText这句显示了servlet中用response.getWriter().println("要在界面中显示的内容")方法存进去的服务器返回的内容
//显示到指定的组件中
document.getElementById("divErrorName").innerHTML=request.responseText;
}
}
3、发送异步请求
function sendRequest() {
//创建XMLHTTPRequest对象
getRequestObject();
//绑定回调方法,
request.onreadystatechange=processResult;
//发送请求
// request.open("GET", "index.jsp", true);
//发送Post请求
request.open("POST", "servlet/CheckUserNameServlet", true);//第三个参数设置成true,表示是异步的
request.setRequestHeader("Content-Type", "application/x-www-formurlencoded");//设置服务器解码的时候用什么格式
var userName=document.getElementById("userName").value;
//将userName做为请求参数发送上去
request.send("userName="+userName);
}
第一天学ajax碰到的问题:
1、细心问题,写错了不少单词,大小写、漏写、错写;
2、用debug调式,不太会,设置断点,结果运行到断点,终止了,一直不知道怎么回事,断点就我的理解,就相当于一个中断,程序运行到你想要停的地方就停了;
3、在jsp页面中,要显示服务器返回的信息,就要把信息在servlet中用response.getWriter().println("要在界面中显示的内容");
4、request.responseText这句显示了servlet中用response.getWriter().println("要在界面中显示的内容")方法存进去的服务器返回的内容。
5、回调函数中的状态判断((request.readyState == 4) &&
(request.status == 200)) ,错把后面的request.status == 200写成了request.state== 200;
6、还有个还没想通的问题,在绑定回调函数的这句代码中request.onreadystatechange=processResult;
,为什么perocessResult这不用括号啊,调用一个方法的时候不都要的吗?
分享到:
相关推荐
很不错的Ajax开发草考文档,方便...3. AJAX源代码简要分析上一章节效果的代码原理4. AJAX与数据库AJAX可以用来和数据端进行数据的交互联通。5. 使用AJAX制作留言本使用已有的AJAX教程,制作一个属于自己的留言本吧....
3. **内容替换**:默认情况下,Ajax响应的HTML内容会被插入到触发请求的元素的父元素中,或根据`data-ajax-update`属性指定的元素进行替换。 4. **禁用链接跳转**:对于链接,jQuery Unobtrusive Ajax会阻止其默认...
3. **发送请求**:调用`send()`方法将数据发送到服务器。如果是GET请求,数据会附加到URL上;如果是POST请求,数据会作为请求体发送。 4. **监听状态变化**:通过`onreadystatechange`事件处理函数监听请求状态。当`...
3. **Ajax请求**:当一级菜单变化时,使用`XMLHttpRequest`或`fetch`发起Ajax请求,将选择的一级菜单值作为参数发送到服务器。 4. **服务器处理**:JavaWeb服务接收到请求后,根据参数查询数据库,获取对应的二级...
3. **处理事件**:当`change`事件触发时,使用jQuery的`$.ajax()`方法向服务器发送请求。请求中包含当前选中的值,服务器根据这些值返回对应的下一级别的选项。 4. **动态更新**:收到服务器响应后,使用jQuery的...
总之,实现Ajax三级联动的关键在于利用JavaScript和Ajax技术进行动态数据交互,通过监听用户的选择事件,动态加载并更新下拉菜单选项。这一过程涉及前端与后端的紧密协作,以提供流畅、无刷新的交互体验。
3. **服务器响应**:服务器接收到请求后,处理请求并返回数据,通常是XML、JSON或者其他格式。这些数据可以通过XMLHttpRequest对象的responseText或responseXML属性获取。 4. **DOM操作**:JavaScript获取到服务器...
**Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为它...
三、前端发送Ajax请求 在前端,我们可以使用JavaScript原生的XMLHttpRequest对象,或者更现代的fetch API,jQuery库的$.ajax()方法,Vue.js、React等库的内置API来发送Ajax请求。以下是一个使用jQuery的示例: ```...
在"AJAX三级联动菜单"项目中,主要涉及以下几个关键技术点: 1. **HTML结构**:首先,我们需要创建一个HTML结构来展示菜单,这通常包括三个下拉列表,分别对应一级、二级和三级菜单。每个下拉列表的选择事件将触发...
在本项目中,“ajax三级联动菜单”利用Ajax实现了动态的、多级关联的下拉菜单功能。这种功能常见于网站的地区选择、商品分类等场景,用户在选择某一选项时,下一级菜单会根据前一级的选择自动更新,提供更加精确的...
Ajax实现三级目录。点击一级目录显示二级目录,二级目录点击显示三级目录。 可以自行添加多级目录,有详细模板。 Ajax实现三级目录。点击一级目录显示二级目录,二级目录点击显示三级目录。 可以自行添加多级目录,...
3. **DOM (Document Object Model)**: 用于操作HTML或XML文档结构,Ajax获取的数据会通过DOM动态地更新页面元素。 4. **CSS**: 用于美化更新后的页面元素。 5. **JSON (JavaScript Object Notation)**: 代替XML作为...
W3School Ajax教程 Ajax 教程 整理的W3School Ajax教程
【Ajax技术概述】 Ajax,全称为Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax并非一种全新的编程语言,而是利用已有的Web技术(如HTML、JavaScript、DOM...
在“AjaxSample”中,创建XMLHttpRequest对象是第一步,用于发送请求和接收响应。 2. **事件处理**:在用户点击按钮时,JavaScript会触发一个事件,这个事件会启动Ajax请求。例如,可以为按钮添加`onclick`事件监听...
3. **第三章:处理响应** - 解析XML和JSON数据 - DOM操作与动态内容插入 - 错误处理和状态监测 4. **第四章:提升用户体验** - 使用Ajax进行页面局部更新 - 轮询和长轮询技术 - 响应式设计和Ajax的兼容性问题...
3. **KnockoutJS**:这是一个MVVM(Model-View-ViewModel)框架,它利用Ajax来实现数据绑定和实时更新,使得视图模型的变化能即时反映到用户界面上。 4. **AngularJS** 和 **Angular**:Google维护的这两个框架都...
3. **服务器端**:服务器需要处理AJAX请求,提供联动数据和验证码验证。这通常涉及数据库查询以获取对应级别的数据,以及验证输入的验证码是否正确。 总的来说,这个"ajax的三级联动源码"示例展示了如何在实际项目...
**Ajax相册系统详解** Ajax(Asynchronous JavaScript and XML)技术是一种在不刷新整个网页的情况下,能够更新部分网页内容的技术。这种技术的核心在于利用JavaScript进行客户端处理,与服务器进行异步数据交换,...