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.一个简单实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <script>
  7. //var xmlHttp = new XMLHttpRequest();
  8. /*创建XMLHttpRequest对象*/
  9. var xmlHttp = false;
  10. /*@cc_on @*/ //ie条件编译
  11. /*@if (@_javascript_version >= 5)
  12. try{
  13. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  14. }catch(e){
  15. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  16. }catch(e2){
  17. xmlHttp = false;
  18. }
  19. @end @*/
  20. if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){
  21. xmlHttp = new XMLHttpRequest();
  22. }
  23.  
  24. function callServer(){
  25. //获取name和password值
  26. var name = document.getElementById("name").value;
  27. var password = document.getElementById("password").value;
  28. //推断name和password是否为空
  29. if((name == "null") || (name == "")) return ;
  30. if(password == "null" || password == "") return ;
  31. //创建要连接的url
  32. var url = "check.php?name=" + escape(name) + "&password" + escape(password);
  33. //建立一个server的请求
  34. xmlHttp.open("GET", url, true);
  35. //创建server完毕后执行的函数
  36. xmlHttp.onreadystatechange = updatePage;
  37. //发送请求
  38. xmlHttp.send(null);
  39. }
  40. function updatePage(){
  41. if(xmlHttp.readyState == 4){ //http就绪状态
  42. if(xmlHttp.status == 200){ //推断http状态代码
  43. var response = xmlHttp.responseText; //处理server响应
  44. document.getElementById("ajax-result").value = response;
  45. }else if(xmlHttp.status == 404){
  46. alert("Request url does not exist!");
  47. }else{
  48. alert("ERROR:status code is" + xmlHttp.status);
  49. }
  50. }
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <div id="form">
  56. <form method="get">
  57. name:<input type="text" id="name" onchange="callServer()"/><br>
  58. passwiord:<input type="text" id="password" onchange="callServer()"><br>
  59. result:<input type="text" id="ajax-result"/>
  60. </form>
  61. </div>
  62. </body>
  63. </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. 爬虫框架Scrapy与Web框架Django结合

    在做两者结合之前,需要先准备一个可以独立运行的Scrapy框架和一个可以独立运行的Django框架! 当准备好这两个框架之后,就可以做两者的结合了. 一. 把scrapy框架,移动到Django框架的 ...

  2. Promise-js异步加载解决方案

    范例: var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完 ...

  3. RabbitMQ 官方NET教程(二)【工作队列】

    这篇中我们将会创建一个工作队列用来在工作者(consumer)间分发耗时任务. 工作队列的主要任务是:避免立刻执行资源密集型任务和避免必须等待其完成.相反地,我们进行任务调度:我们把任务封装为消息发送 ...

  4. P1146 硬币翻转

    题目描述 在桌面上有一排硬币,共N枚,每一枚硬币均为正面朝上.现在要把所有的硬币翻转成反面朝上,规则是每次可翻转任意N-1枚硬币(正面向上的被翻转为反面向上,反之亦然).求一个最短的操作序列(将每次翻 ...

  5. HTML 5概述

    HTML语言是一种简易的文件交换标准,用于物理的文件结构,它旨在定义文件内的对象和描述文件的逻辑结构,而并不定义文件的显示.由于HTML所描述的文件具有极高的适应性,所以特别适合于WWW的出版环境. ...

  6. 搭建Hadoop所遇过的坑

    问题1: 报错信息如下: Container exited with a non-zero exit code 143 Killed by external signal 解决方案: 分配的资源不够, ...

  7. 使用cookies查询商品详情

    易买网项目完工,把一些新知识记录下来,以便以后查阅,也方便他人借阅.介绍使用cookies查询商品详情. 第一步:建立商品实体类. 第二步:连接Oracle数据库. 第三步:使用三层架构. 效果图如下 ...

  8. ANN:DNN结构演进History—LSTM网络

    为了保持文章系列的连贯性,参考这个文章: DNN结构演进History-LSTM_NN 对于LSTM的使用:谷歌语音转录背后的神经网络 摘要: LSTM使用一个控制门控制参数是否进行梯度计算,以此避免 ...

  9. promise原理及使用方法

    Promise 的含义 所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. re ...

  10. MySql数据库多表操作

    一.连接查询[连表查询.多表查询] 当查询结果的列来源于多张表时,需要将多张表连接成一个大的数据集,再选择合适的列返回 mysql支持三种类型的连接查询,分别为: 内连接查询(inner join) ...