[ajax 学习笔记] ajax初试
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初试的更多相关文章
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...
- Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
- 20151207jquery 学习笔记 Ajax
.load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获 ...
- aJax学习之Ajax工作原理
转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...
- 基于PHP的AJAX学习笔记(教程)
本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...
- ajax学习笔记1
ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据 ...
- Java Script 学习笔记 -- Ajax
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
- Jquery学习笔记 --ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
随机推荐
- 爬虫框架Scrapy与Web框架Django结合
在做两者结合之前,需要先准备一个可以独立运行的Scrapy框架和一个可以独立运行的Django框架! 当准备好这两个框架之后,就可以做两者的结合了. 一. 把scrapy框架,移动到Django框架的 ...
- Promise-js异步加载解决方案
范例: var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完 ...
- RabbitMQ 官方NET教程(二)【工作队列】
这篇中我们将会创建一个工作队列用来在工作者(consumer)间分发耗时任务. 工作队列的主要任务是:避免立刻执行资源密集型任务和避免必须等待其完成.相反地,我们进行任务调度:我们把任务封装为消息发送 ...
- P1146 硬币翻转
题目描述 在桌面上有一排硬币,共N枚,每一枚硬币均为正面朝上.现在要把所有的硬币翻转成反面朝上,规则是每次可翻转任意N-1枚硬币(正面向上的被翻转为反面向上,反之亦然).求一个最短的操作序列(将每次翻 ...
- HTML 5概述
HTML语言是一种简易的文件交换标准,用于物理的文件结构,它旨在定义文件内的对象和描述文件的逻辑结构,而并不定义文件的显示.由于HTML所描述的文件具有极高的适应性,所以特别适合于WWW的出版环境. ...
- 搭建Hadoop所遇过的坑
问题1: 报错信息如下: Container exited with a non-zero exit code 143 Killed by external signal 解决方案: 分配的资源不够, ...
- 使用cookies查询商品详情
易买网项目完工,把一些新知识记录下来,以便以后查阅,也方便他人借阅.介绍使用cookies查询商品详情. 第一步:建立商品实体类. 第二步:连接Oracle数据库. 第三步:使用三层架构. 效果图如下 ...
- ANN:DNN结构演进History—LSTM网络
为了保持文章系列的连贯性,参考这个文章: DNN结构演进History-LSTM_NN 对于LSTM的使用:谷歌语音转录背后的神经网络 摘要: LSTM使用一个控制门控制参数是否进行梯度计算,以此避免 ...
- promise原理及使用方法
Promise 的含义 所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. re ...
- MySql数据库多表操作
一.连接查询[连表查询.多表查询] 当查询结果的列来源于多张表时,需要将多张表连接成一个大的数据集,再选择合适的列返回 mysql支持三种类型的连接查询,分别为: 内连接查询(inner join) ...