var xmlhttp;
//ajax 异步调用
function loadXMLDocAsyn(url, cfunc) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
//ajax 同步调用
function loadXMLDocSyn(url) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url, false);
xmlhttp.send();
return xmlhttp.status;
}
//检查用户名是否合法,包括客户端检查和服务端ajax调用
function checkName(){
var username = document.getElementById("username").value;
document.getElementById("tip").innerHTML = " ";
if(username.length==0){ //用户名格式检查
document.getElementById("tip").innerHTML = "<font color='#FF0000'>用户名不能为空</font>";
document.getElementById("username").focus();
document.getElementById("flag").value = "false";
}else{//调用ajax检查用户名是否重复
loadXMLDocAsyn("action/checkNameAction.php?username="+username, getResult);
//**************************************************************/
//以下是同步调用实现方式
// var status = loadXMLDocSyn("action/checkNameAction.php?username="+username);
// if(status==200){
// if(xmlhttp.responseText.length!=0){
// document.getElementById("tip").innerHTML = "<font color='#FF0000'>用户名已被占用</font>";
// document.getElementById("username").focus();
// document.getElementById("flag").value = "false";
// }else{
// document.getElementById("flag").value = "true";
// }
// }
//******************************************************************/
}
}
//用户名查重checkName()中ajax的回调函数
function getResult() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText.length!=0){
document.getElementById("tip").innerHTML = "<font color='#FF0000'>用户名已被占用</font>";
document.getElementById("username").focus();
document.getElementById("flag").value = "false";
}else{
document.getElementById("flag").value = "true";
}
}
}
分享到:
相关推荐
jQuery库简化了Ajax操作,提供了一个$.ajax()函数。这个例子中,我们将看到如何利用jQuery的$.ajax()方法进行请求。同样设置URL、类型等参数,但无需手动创建XMLHttpRequest对象。jQuery会自动处理跨域、JSONP等...
一旦有了这个对象,我们就可以设置它的回调函数,这些函数会在不同的阶段被调用,例如当请求发送、接收到数据或者请求完成时。最常见的回调是`onreadystatechange`,它会在状态改变时触发。Ajax请求有五个状态码,...
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这种技术可以提升用户体验,因为它使得网页更加互动,减少了用户等待时间。 在Ajax的核心中,主要涉及到以下几个关键组成部分: 1. **...
3. **打开连接**:调用`open()`方法,指定请求类型(GET或POST),URL和是否异步。例如: ```javascript xhr.open('GET', 'example.php', true); ``` 4. **发送请求**:使用`send()`方法发送请求。如果是GET请求...
**AJAX的应用场景举例:** 1. **动态加载内容**:比如Google Maps,当用户拖动地图时,只加载可见区域的新数据,而不是重新加载整个地图。 2. **无刷新搜索**:搜索框中输入关键词时,下方会实时显示匹配结果,...
### Ajax基础教程知识点详解 #### 一、Ajax技术概览 **1.1 Web应用** - **起源与发展:** - 最早的互联网是为连接少数顶尖研究机构而设计的,用户需要掌握复杂的系统。 - 早期互联网的雏形(如ARPANET)为后续...
AsyncAjaxSample Ajax异步调用的完整示例 第2章(/C02/) 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“<noscript></noscript>” 2.3.htm 调用单独的JS文件 2.3.js 一个单独的...
此外,文中还展示了如何使用默认参数,通过`arguments`对象访问函数调用时传入的参数。例如,即使没有在函数定义中指定,也可以通过`arguments[i]`访问参数。 3. **PHP** - 在处理用户输入时,例如从Ajax请求中获取...
这样设计的原因在于,如果返回完整的`Deferred`对象,外部代码可能会无意中或故意地提前调用`resolve()`或`reject()`,导致回调函数在AJAX请求完成之前被触发,这将违反AJAX异步执行的基本原则。 为了防止这种情况...
接下来,我们将举例说明如何使用Ajax进行用户存在的验证。假设我们有一个简单的用户注册表单,用户输入用户名后,我们希望在提交前验证该用户名是否已被占用。 ```javascript // 创建XMLHttpRequest对象 var xhr = ...
DWR,全称为Direct Web Remoting,是一种基于AJAX(Asynchronous JavaScript and XML)技术的Java实现,它允许Web浏览器通过JavaScript直接调用后端的业务逻辑组件。这一特性极大地简化了Web应用程序的开发,特别是...
在JavaScript执行的过程中,引擎首先会执行所有同步代码,包括函数调用、变量赋值等。当遇到异步任务时,它不会立即执行,而是将其放入对应的队列中。执行流程遵循以下规则: 1. 完成当前执行上下文(执行栈)的...
DWR还提供了许多高级特性,如批量调用、缓存、异步调用等,可以根据项目需求进行探索和使用。 总的来说,DWR推技术为开发者提供了一种高效、便捷的方式来实现Web应用的实时交互,大大提升了用户体验。通过实践这个...
当异步操作成功完成时,调用resolve函数;如果操作失败,调用reject函数。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦Promise的状态变为fulfilled或rejected,它就会锁定...
- AJAX请求:如果需要确保一系列的AJAX请求按顺序发送和响应,可以在每次AJAX请求的回调函数中调用dequeue()方法,以此来触发下一个请求。 - 定时器函数:定时器函数如setTimeout和setInterval也可以加入队列中,...
- **Ajax交互**:`$.ajax()`或`$.get()`、`$.post()`等函数用于异步数据请求,使得网页可以在不刷新的情况下更新内容。 - **DOM操作**:jQuery提供了便捷的方法来创建、插入、删除DOM元素,如`append()`、`prepend...
首先,jQuery API是jQuery库的核心,它提供了丰富的函数和方法供开发者调用。API主要包括选择器(Selectors)、属性操作(Attributes)、DOM操作(Manipulation)、事件处理(Events)、效果与动画(Effects & ...