一般项目用ajax吗,快速上手AJAX,拿来就能引用到自己的项目中去

一 AJAX简介

AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二 AJAX应用

1运用XHTML+CSS来表达资讯。

2运用JavaScript操作DOM(Document Object Model)来执行动态效果；

3运用XML和XSLT操作自资料。

4运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；

5注意：AJAX与Flash、Sliverlight和Java Apple等RIA技术是有区分的。

image.png

二 通过实例讲述AJAX。

Document

form {

width: 380px;

text-align: center;

}

input {

width:210px;

height: 40px;

padding: 0px 10px;

outline: none;

border: 1px solid #cccccc;

margin-bottom: 10px;

}

#btn-submit {

width:60px;

height: 40px;

font-size: 18px;

background: green;

color: #ffffff;

}

用户名：

密码：

//获取提交按钮对象

var btnSubmit = document.getElementById('btn-submit');

//提交按钮对象监听点击事件

btnSubmit.onclick = checkForm;

function checkForm(){

//验证用户名是否为空

var username = document.getElementById('username').value;

if(username == ''){

alert("用户名不能为空");

return;

}

//验证密码是否为空

var password = document.getElementById("password").value;

if(password == ''){

alert("密码不能为空");

return;

}

//向服务器提交的数据

var data = 'username='+username+"&password="+password;

//提交数据的地址

var url = "/toLogin";

//调用ajax函数

ajax(url,'post',data);

}

//url:提交数据的地址；method:提交方式；data:提交数据

function ajax(url,method,data){

// XMLHttpRequest 对象;所有现代浏览器均支持 XMLHttpRequest 对象

//(IE5 和 IE6 使用 ActiveXObject)。

var xmlhttp;

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

}else{// code for IE6, I E5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

// onreadystatechange 存储函数(或函数名)，每当 readyState 属性改变时，就会调用该函数。

// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

// 0: 请求未初始化

// 1: 服务器连接已建立

// 2: 请求已接收

// 3: 请求处理中

// 4: 请求已完成，且响应已就绪

xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){//请求成功并成功获取数据

//xmlhttp.responseText代表服务器端返回的数据

console.log(xmlhttp.responseText);

alert(xmlhttp.responseText);

}

}

// open(method,url,async)

// 规定请求的类型、URL 以及是否异步处理请求。

xmlhttp.open(method,url,true);

// send(string)

// 将请求发送到服务器。

xmlhttp.send(data);

}