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操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
webpack HappyPack实战详解
Oct 08 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php5新改动之短标记启用方法
2008/09/11 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python绘制规则网络图形实例
2019/12/09 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
企业管理专业个人求职信范文
2013/09/24 职场文书
2014的自我评价
2014/01/13 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
人事任命通知书
2015/04/21 职场文书
教师节感想
2015/08/11 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python