转行学开发,代码100天——2018-05-19

Ajax技术学习笔记

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

AJAX应用:

  • 运用XHTML+CSS来表达资讯;
  • 运用JavaScript操作DOM(Document Object Model)来执行动态效果;
  • 运用XML和XSLT操作资料;
  • 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换;
  • 注意:AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX实现原理:

Ajax使用步骤:

1>     创建ajax对象

var xmlhttp;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码

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

}

2>     打开文件

xmlhttp.open("GET","ajax_info.txt?t="+new Date().getTime(),true);
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

3>    
发送请求

Get方法:

xmlhttp.send();

post 方法:

xmlhttp.send(string);

例1:

xmlhttp.open("POST","/try/ajax/demo_post.php",true);

xmlhttp.send();

例2:

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

4>    
异步请求响应

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

服务器响应有两种:

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i<x.length;i++)

{

txt=txt + x[i].childNodes[0].nodeValue + "<br>";

}

document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

属性

描述

onreadystatechange

存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status

200:
"OK"
404: 未找到页面

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

Xml文件解析:

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

  myFunction(this);

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

}

function myFunction(xml) {

var i;

var xmlDoc = xml.responseXML;

var
table="<tr><th>Artist</th><th>Title</th></tr>";

var x = xmlDoc.getElementsByTagName("CD");

for (i = 0; i <x.length; i++) {

table += "<tr><td>" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+

"</td><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+

"</td></tr>";

}

document.getElementById("demo").innerHTML = table;

}

day64—ajax技术学习笔记的更多相关文章

  1. Java多线程技术学习笔记(二)

    目录: 线程间的通信示例 等待唤醒机制 等待唤醒机制的优化 线程间通信经典问题:多生产者多消费者问题 多生产多消费问题的解决 JDK1.5之后的新加锁方式 多生产多消费问题的新解决办法 sleep和w ...

  2. AJAX(学习笔记一)

    1:什么是AJAX? AJAX是一组英文单词的简写,这组英文单词是 :Asynchronous JavaScript and XML ,翻译成中文的意思是: 异步的JavaScript 和 XML.什 ...

  3. Java多线程技术学习笔记(一)

    目录: 概述 多线程的好处与弊端 JVM中的多线程解析 多线程的创建方式之一:继承Thread类 线程的状态 多线程创建的方式之二:实现Runnable接口 使用方式二创建多线程的好处 多线程示例 线 ...

  4. JS高程关于ajax的学习笔记

    1.ajax介绍 ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面,就可以从服务器中获取需要的数据. ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR对象为向服 ...

  5. Ajax的学习笔记(一)

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术. ...

  6. Wix打包技术学习笔记

    http://blog.csdn.net/duanzilin/article/details/5951709 很好的教程,有时间好好学习一下.然后自己整理笔记,暂时不打算深入研究

  7. 20151211Jquery Ajax进阶学习笔记

    四.JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非 同域下,可以使用 JSONP,但也是有条件的. //$.ajax( ...

  8. Jquery+Ajax+php学习笔记

    昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery- ...

  9. 流媒体技术学习笔记之(一)nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器

    参照网址: [1]http://blog.csdn.net/redstarofsleep/article/details/45092147 [2]HLS介绍:http://www.cnblogs.co ...

随机推荐

  1. 和IE6-IE8说拜拜 一段IE兼容HTML代码 针对IE版本写css

    通过这段html可以让你对特定的ie版本添加内容,只在特定版本ie展现,可以是javascript.css.html. <!--[if IE]> 这样使用IE浏览器(全部版本)的人都看得到 ...

  2. MongoDB入门_shell基本操作

    使用shell客户端连接mongoDB数据库 [root@localhost mongodb_simple]# ./bin/mongo /admin mongoDB的简单基本操作 1. mongoDB ...

  3. jquery-mobile pop

    一.弹框 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. Codeforces 898 贪心关闭最少闹钟 优先队列最少操作构造N/2squares 讨论情况哈希数字串分割a+b=c

    A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...

  5. web框架-(六)Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  6. 一些项目中用到的php函数

    #不为空 if (!empty($_POST)) { } #生成随机数 mt_rand(,)产生999-9999范围间的随机数

  7. windows上部署hadoop(单机版)

    在window系统开发程序时,远程linux服务器上的hadoop速度很慢,影响开发效率,能不能在本地搭建hadoop环境的?答案肯定的,且看下文如何在window上部署hadoop: (源文地址:h ...

  8. PIXI兼容微信小游戏

    首先导入官方的weapp-adapter,然后导入pixi.min.js,微信小程序使用ES6的module引用模块,具体参见ES6的Module. import './libs/weapp-adap ...

  9. Java面试之持久层(10)

    91,什么是ORM?         对象关系映射(Object-Relational Mapping,简称ORM)是一种为了解决程序的面向对象模型与数据库的关系模型互不匹配问题的技术: 简单的说,O ...

  10. Java 集合基础详细介绍

    一.Java集合框架概述 集合.数组都是对多个数据进行存储操作的结构,简称Java容器.此时的存储,主要指的是内存层面的存储,不涉及到持久化的存储(.txt, .jpg, .avi,数据库中).Jav ...