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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
js变换显示图片的实例
Apr 16 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
node.js 动态执行脚本
Jun 02 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
JS表格的动态操作完整示例
Jan 13 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python函数中不定长参数的写法
2019/02/13 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Python如何使用字符打印照片
2020/01/03 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Python中的__init__作用是什么
2020/06/09 Python
一套英文Java笔试题面试题
2016/04/21 面试题
篮球比赛拉拉队口号
2014/06/10 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫