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


Posted in Javascript onOctober 17, 2016

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

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

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

示例:

html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例</title>
<style>
#loginForm {
border-collapse: collapse;
}
#loginForm,#loginForm td {
border:#550 1px solid;
text-align:center;
}
</style>
</head>
<body>
<table id="loginForm">
<tr>
<td>用户名:</td>
<td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="password"/></td>
</tr>
<tr>
<td colspan=2><input id="submitBtn" type="submit" value="ajax提交"/></td>
</tr>
</table>
<script type="text/javascript" language="javascript">
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.');
}
}
}
</script>
</body>
</html>

./test.php代码如下

<?php
header('content-type:text/html;charset=utf-8');
var_dump($_POST);//获取到post传递的数据
var_dump($_GET);

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

Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
JQuery中解决重复动画的方法
Oct 17 #Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 #Javascript
原生JavaScript制作计算器
Oct 16 #Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 #Javascript
JavaScript正则表达式实例详解
Oct 16 #Javascript
js实现碰撞检测特效代码分享
Oct 16 #Javascript
js+css3制作时钟特效
Oct 16 #Javascript
You might like
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
Django实现自定义404,500页面教程
2017/03/26 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
利用python求相邻数的方法示例
2017/08/18 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python实现三次样条插值
2018/12/17 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Python实现微信表情包炸群功能
2021/01/28 Python
酷瑞网络科技面试题
2012/03/30 面试题
几个判断型的面试题
2012/07/03 面试题
业务主管岗位职责范本
2013/12/25 职场文书
国庆横幅标语
2014/10/08 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2014年妇女工作总结
2014/12/06 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
z-index不起作用
2021/03/31 HTML / CSS
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB