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功能的概念和示例的更多相关文章

  1. 使用Javascript实现ajax示例

    使用原始的javascript实现ajax <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  2. flask与javascript及ajax

    flask与javascript及ajax 1.      flask+js 1.1.    最简单的 最简单的元素信息改变. {% block content %} <h1>我的第一张网 ...

  3. 初识JavaScript，Ajax，jQuery，并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  4. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  5. JavaScript基础---AJAX

    内容提纲: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax  发文不易,转载请注明链接出处,谢谢! 2005年Jesse James Garrett发表了一篇文章,标题为:“ ...

  6. 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  7. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...

  8. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  9. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

随机推荐

  1. String，Json，Map之间的转化

    前提条件: 1)String的格式是map或json类型的 ; 2)在JAVA中使用JSON需要引入 org.json 包 String >>Json JSONObject jsonObj ...

  2. 管道/FIFO注意事项

    管道 1. 其本质是一个伪文件(实为内核缓冲区) 2. 由两个文件描述符引用,一个表示读端,一个表示写端. 3. 规定数据从管道的写端流入管道,从读端流出. 管道的原理: 管道实为内核使用环形队列机制 ...

  3. 【OCP-12c】CUUG 071题库考试原题及答案解析（21）

    3.choose three View the Exhibit and examine the description of SALES and PROMOTIONS tables. You want ...

  4. Nginx + uWSGI 配置django---终极版

    好开森,配置了差不多一天的项目,终于成功了,写一篇博客庆祝一下 我们先来了解下nginx与uwsgi的概念,再去配置 磨刀不误砍柴工. nginx 是一个开源的高性能的 HTTP 服务器和反向代理:1 ...

  5. gulp 搭建个人工作流：文件注入、热启动、跨域

    个人比价推崇前后端分离的开发方式,大家伙各司其职,只需通过 API 进行交流,不仅避免了沟通上的成本,更提升了开发效率.而在前端开发工作中,许多需求和问题是相似的,所以我们的开发模式往往是雷同的,是否 ...

  6. SpringData JPA复合主键

    上一篇博客简单介绍了SpringData JPA实现简单的CRUD,分页与多条件的排序,那里的主键类型是Long,有时我们会遇到主键不是一个的,复合主键,经过调研如下.确定一个人,不能只根据他的姓名来 ...

  7. Spring注解学习笔记一

    一.Retention注解Retention(保留)注解说明,这种类型的注解会被保留到那个阶段. 有三个值: 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只 ...

  8. Flink学习笔记-新一代Flink计算引擎

    说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...

  9. 架构师养成记--25.linux用户管理

    用户管理配置文件用户信息文件:/etc/passwd密码文件:/etc/shadow用户配置文件:/etc/login.defs /etc/default/useradd新用户信息文件:/etc/sk ...

  10. OI中一些常见实用的套路【更新中】

    数据结构 在维护树上路径时,如果只是点的独立的加减,可以考虑用括号序来维护(拆成两部分) 需要求树上很多路径中k近/距离和 一类,考虑点分治/在点分树上解决. 子树求和可以转化为DFS序上区间求和 树 ...