javascript的ajax功能的概念和示例
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);
其它参考链接:http://www.jb51.net/article/41336.htm
javascript的ajax功能的概念和示例的更多相关文章
- 使用Javascript实现ajax示例
使用原始的javascript实现ajax <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
- flask与javascript及ajax
flask与javascript及ajax 1. flask+js 1.1. 最简单的 最简单的元素信息改变. {% block content %} <h1>我的第一张网 ...
- 初识JavaScript,Ajax,jQuery,并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- JavaScript基础---AJAX
内容提纲: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax 发文不易,转载请注明链接出处,谢谢! 2005年Jesse James Garrett发表了一篇文章,标题为:“ ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
随机推荐
- Spring Data MongoDB 一:入门篇(环境搭建、简单的CRUD操作)
一.简介 Spring Data MongoDB 项目提供与MongoDB文档数据库的集成.Spring Data MongoDB POJO的关键功能区域为中心的模型与MongoDB的DBColle ...
- Oracle数据库01
常用函数 COUNT(*):统计所有的数据量,没有过滤功能 COUNT(字段):统计出指定字段不为null的数据量,有过滤功能 COUNT(DISTINCT 字段):统计指定字段不为空并且去掉重复数据 ...
- HTTP调用接口方法
1.创建接口调用方法类 package cn.com.victorysoft.sjzx.Message; import java.io.BufferedReader; import java.io.I ...
- AI-Info-Micron:人如其食:人工智能和人类微生物组
ylbtech-AI-Info-Micron:人如其食:人工智能和人类微生物组 1.返回顶部 1. 人如其食:人工智能和人类微生物组 “相信你身体发出的信号”,的确是一个很好的建议.研究人员在不遗余力 ...
- android frame的学习
http://blog.csdn.net/littletigerat/article/details/6318365 //2011年Android Activity生命周期学习笔记 http:// ...
- GO学习笔记 - 数据类型推导
官方教程:https://tour.go-zh.org/basics/14 在定义一个变量却并不显式指定其类型时(使用 := 语法或者 var = 表达式语法), 变量的类型由(等号)右侧的值推导得出 ...
- API接口安全加强设计方法
前面两篇相关文章: <Web Api 内部数据思考 和 利用http缓存优化 Api> <Web Api 端点设计 与 Oauth> 1.开放的接口 这样的接口我们天天都在接触 ...
- jquery基础认知
who what触发 按钮 点击 (click)执行 div 动画 (animation) $(document).ready(functio ...
- linux中rc.d目录下的文件
参考 http://blog.sina.com.cn/s/blog_414d78870102vqj5.html http://www.360doc.com/content/12/0820/17/933 ...
- 豆瓣电影信息爬取(json)
豆瓣电影信息爬取(json) # a = "hello world" # 字符串数据类型# b = {"name":"python"} # ...