ajax全称是：asynchronous javasctipt and xml。

1.为什么须要ajax？

一般web程序与server的交互是：页面发送请求等待server处理，server处理数据，用户页面刷新整个页面。从而完毕了一次交互。

假设用这样的同步方式进行多次这样的页面与server的交互，用户将会须要非常多时间去等待server处理。

ajax异步处理的思想是：当页面发送请求后，交给server处理。server处理的同一时候，页面无须等待能够进行其它的操作，当server处理完毕后，在当前页面显示结果，无须刷新整个页面。

2.ajax的简单实现

实现ajax须要用到javascript的XMLHttpRequest对象。

实现过程

1）创建对象（不同浏览器有不同的创建方法，一般须要考虑ie和非ie浏览器）

ie浏览器要用到ActiveXObject。

非ie浏览器可直接新建XMLHttpRequest对象实例。

2）发送请求。

发送请求前须要先建立一个与server的连接。

它须要的參数有发送类型、连接的url、异步连接状态值等。

> 发送类型：GET/POST等。

> url：连接地址 + ？ + 传送的值 （+ & + 传送的值..）   [这里是用的get方式]

> 异步连接状态值：true / false。

默觉得true。true表示异步连接。

在发送请求前还要建立一个返回函数。它是用来指定server响应后要运行的内容。

发送请求。

3）server响应函数

3.一个简单实例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script>

			//var xmlHttp = new XMLHttpRequest();

			/*创建XMLHttpRequest对象*/

			var xmlHttp = false;

			/*@cc_on @*/  //ie条件编译

			/*@if (@_javascript_version >= 5)

			try{

				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

			}catch(e){

				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

			}catch(e2){

				xmlHttp = false;

			}

			@end @*/

			if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){

				xmlHttp = new XMLHttpRequest();

			}

			function callServer(){

				//获取name和password值

				var name = document.getElementById("name").value;

				var password = document.getElementById("password").value;

				//推断name和password是否为空

				if((name == "null") || (name == "")) return ;

				if(password == "null" || password == "") return ;

				//创建要连接的url

				var url = "check.php?name=" + escape(name) + "&password" + escape(password);

				//建立一个server的请求

				xmlHttp.open("GET", url, true);

				//创建server完毕后执行的函数

				xmlHttp.onreadystatechange = updatePage;

				//发送请求

				xmlHttp.send(null);

			}

			function updatePage(){

				if(xmlHttp.readyState == 4){   //http就绪状态

					if(xmlHttp.status == 200){    //推断http状态代码

						var response = xmlHttp.responseText; //处理server响应

						document.getElementById("ajax-result").value = response;

					}else if(xmlHttp.status == 404){

						alert("Request url does not exist!");

					}else{

						alert("ERROR:status code is" + xmlHttp.status);

					}

				}

			}

		</script>

	</head>

	<body>

		<div id="form">

			<form method="get">

				name:<input type="text" id="name" onchange="callServer()"/><br>

				passwiord:<input type="text" id="password" onchange="callServer()"><br>

				result:<input type="text" id="ajax-result"/>

			</form>

		</div>

	</body>

</html>

[ajax 学习笔记] ajax初试的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  3. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  4. 20151207jquery 学习笔记 Ajax

    .load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获 ...

  5. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  6. 基于PHP的AJAX学习笔记（教程）

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  7. ajax学习笔记1

    ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据 ...

  8. Java Script 学习笔记 -- Ajax

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  9. Jquery学习笔记 --ajax删除用户，使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

随机推荐

  1. 【专题系列】单调队列优化DP

    Tip:还有很多更有深度的题目,这里不再给出,只给了几道基本的题目(本来想继续更的,但是现在做的题目不是这一块内容,以后有空可能会继续补上) 单调队列——看起来就是很高级的玩意儿,显然是个队列,而且其 ...

  2. 2015 多校赛 第二场 1006 (hdu 5305)

    Problem Description There are n people and m pairs of friends. For every pair of friends, they can c ...

  3. Activity生命周期（待整理）

    1. 定义 有一些方法共同定义生命周期,如下图示:(图片来自于官网文档) 2. onStart()——在Activity即将对用户可见之前调用 (1)Activity启动动画.二维动画在onStart ...

  4. java中equals方法和==的用法

    java中equals方法的用法以及==的用法(参考一)equals 方法是 java.lang.Object 类的方法.两种用法说明:(1对于字符串变量来说,使用“==”和“equals()”方法比 ...

  5. python爬虫：爬取百度云盘资料，保存下载地址、链接标题、链接详情

    在网上看到的教程,但是我嫌弃那个教程写的乱(虽然最后显示我也没高明多少,哈哈),就随手写了一个 主要是嫌弃盘搜那些恶心的广告,这样直接下载下来,眼睛清爽多了. 用pyinstall 打包成EXE文件, ...

  6. Sql语句优化-查询两表不同行NOT IN、NOT EXISTS、连接查询Left Join

    在实际开发中,我们往往需要比较两个或多个表数据的差别,比较那些数据相同那些数据不相同,这时我们有一下三种方法可以使用:1. IN或NOT IN,2. EXIST或NOTEXIST,3.使用连接查询(i ...

  7. 解决：惠普HP LaserJet Pro M126a MFP 驱动 安装失败，及其它同类打印机失败问题

    注意:如果在 Windows XP 系统下安装出错,请先安装WindowsXP KB971276-v3补丁后再安装装驱动. 下载地址:http://www.dyjqd.com/soft/KB97127 ...

  8. AI：忧郁的机器人

    1.塔奇克马 塔奇克马研究起来哲学,被缴械....... 2.机器人瓦力 孤独等待EVA的瓦力 3.马文 http://www.guokr.com/post/683881/

  9. 关于python学习路线

    *Python进阶(目录/书籍/学习路线) 忘了从哪里转的了,没办法标记哦,实在不好意思... 目录:) 1. 简介&helloworld&开发环境配置 2.基本语法:标识符& ...

  10. DataGridView 单击赋值

    void dataGridView1_Click(object sender, EventArgs e) { M_int_judge = ; btnSave.Enabled = true; btnSa ...