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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
vue修改vue项目运行端口号的方法
Aug 04 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
车间班组长岗位职责
2013/11/13 职场文书
给女儿的表扬信
2014/01/18 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
保险公司晨会主持词
2014/03/22 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫