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. invoke与call

    “调用一个委托实例” 中的 “调用” 对应的是invoke,理解为 “唤出” 更恰当.它和后面的 “在一个对象上调用方法” 中的 “调用” 稍有不同,后则对应的是call.在英语的语境中,invoke ...

  2. Spring Boot (13) druid监控

    druid druid是和tomcat jdbc一样优秀的连接池,出自阿里巴巴.除了连接池,druid哈hi有一个很实用的监控功能. pom.xml 添加了以下依赖后,会自动用druid连接池替代默认 ...

  3. （转）Vue 爬坑之路（二）—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  4. objectdatasouce的温故

    在做ecxel的时候,需要前台做一个联动的效果. 记录一下这个数据源的用法,大学时候用的,忘得差不多了 首先就是往页面拖拽一个objectdatasouce的控件 然后配置数据源: 选择业务对象(其实 ...

  5. vim之快速跳转

    光棍节啦, 淘东西的闲暇上来发vim旅途第一篇日志. 为什么呢? 因为今天是我媳妇的生日, 我用这种只有我知道的方式来纪念一下. ^_^, 宝宝生日快乐! 开篇先说明日志布局, vim学习记录连载中所 ...

  6. C# 获取正在使用的Mac地址

    /// <summary> /// 获得当前机器的活动中Mac地址,若无联网则返回空"" /// 需在项目引用中添加 System.Management /// < ...

  7. 分块编码（Transfer-Encoding: chunked）VS Content-length

    参考链接: HTTP 协议中的 Transfer-Encoding 分块传输编码 https://www.cnblogs.com/xuehaoyue/p/6639029.html 一.背景: 持续连接 ...

  8. Luogu P1365 WJMZBMR打osu! / Easy

    概率期望专题首杀-- 毒瘤dp 首先根据数据范围推断出复杂度在O(n)左右 但不管怎么想都是n^2-- 晚上躺在床上吃东西的时候(误)想到之前有几道dp题是通过前缀和优化的 而期望的可加性又似乎为此创 ...

  9. CorelDRAW中内置的视频教程在哪里？

    CorelDRAW中内置了很多教学内容和视频教程,可以帮助用户快速学习和掌握CorelDRAW的使用方法,创作出个性化的作品.很多小伙伴表示找不到软件自带学习视频,现在小编就来告诉你. 用户可以通过两 ...

  10. 【转】上拉下拉电阻、I/O输出（开漏、推挽等）

    作者:BakerZhang 链接:https://www.jianshu.com/p/3ac3a29b0f58来源:简书 感谢! ——————————————————————————————————— ...