java中ajax概念_JavaScript中的ajax功能的概念和示例详解

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)。

个人理解：ajax就是无刷新提交，然后得到返回内容。

对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时)，必须重载整个网页页面。

示例：

html代码如下

Ajax示例

#loginForm {

border-collapse: collapse;

}

#loginForm,#loginForm td {

border:#550 1px solid;

text-align:center;

}

用户名：
密码：

document.getElementById('submitBtn').addEventListener('click', clickSubmit);

function clickSubmit() {

makeRequest('./test.php');

}

var req = false;

/**

* 创建ajax请求

* url 处理请求的php位置

*/

function makeRequest(url) {

req = false;

//创建一个XMLHTPP实例

if (window.XMLHttpRequest) { // ie9以上和w3c浏览器的对象

req = new XMLHttpRequest();

if (req.overrideMimeType) {

//如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作.

//为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.

req.overrideMimeType('text/xml');

}

} else if (window.ActiveXObject) { // IE678专用

try {

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

} catch (e) {

alert('new window.ActiveXObject() failed!');

}

}

if (!req) {

alert('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

//指定处理响应的JavaScript函数名.

req.onreadystatechange = alertContents;

//测试传递 用户名和密码

var user_name = document.getElementById('userName').value;

var user_pwd = document.getElementById('password').value;

//open(请求方式，准确的本域域名，是否异步);

//GET或POST方式

//----GET方式请求------

//req.open('GET', url+'?user_name='+user_name+'&user_pwd='+user_pwd, true);

//req.send(null);

//----POST方式请求------

//发送请求 如果open是POST方式可以发送字符串给服务器,也可以在open的第二个参数同时加上get传输

req.open('POST', url+'?get1='+user_name+'&get2='+user_pwd, true);

req.open('POST', url, true);

req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

req.send('user_name='+user_name+'&user_pwd='+user_pwd);

}

/**

* ajax请求的回调处理函数

*/

function alertContents() {

if (req.readyState == 4) {

console.log(req.status);

if (req.status == 200) {

alert(req.response);

} else {

alert('There was a problem with the request.');

}

}

}

./test.php代码如下

header('content-type:text/html;charset=utf-8');

var_dump($_POST);//获取到post传递的数据

var_dump($_GET);

以上所述是小编给大家介绍的JavaScript中的ajax功能的概念和示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！