标签：
一:Ajax简介因为页面提交数据的时候，到服务器响应，返回一个新的网页，应用的响应时间取决于服务器的响应时间，所以用户的响应时间会慢很多
Ajax是只取回必要的数据，局部进行更新
1）、Ajax概述
Ajax的全称是Asynchronous JavaScript and XML,中文定义为”异步JavaScript和XML”，
Web2.0技术的核心
由多种技术组合而成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。
2.Ajax工作原理
Javascript
一部数据获取技术XMLHttpRequest
xml
Dom
XMLHttpRequest js的API
3.常用案例
如淘宝的购物车，无需刷新页面，就会自动更新，还有很多栗子
二:Ajax基础
Ajax技术核心是异步数据获取技术，也就是XMLHttpRequest 对象
传统的页面是利用html表单，向服务器get或post数据，而用户需要等待网页的响应，然后新的网页加载结果
可以直接利用js的API直接与服务器进行通信，同使用http协议，web页面可以向服务器发送请求，并得到服务器的响应，但不加载页面，用户停留在同一页面，用户
构造XMLHttpRequest 对象:
request = new XMLHttpRequest()
(firfox,opera,safari等高级浏览器)
xmlhttp = new ActiveXObject(‘Msxml2.XMLHTTP‘)
IE6+
或者这样创建
xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP‘)
如果这三种方式都不能成功创建，那么这个浏览器就不支持Ajax
XMLHttpRequest 对象的属性：
onreadystatechange:存储处理服务器响应的函数
request = new XMLHttpRequest()
request.onreadystatechange = function(){
//这里要写一些代码
}
readyState 存储服务器响应的状态信息，每当这个状态值改变的时候，onreadystatechange对应的函数就要被调用一次 request.onreadystatechange = function(){
//这里要写一些代码
}
有五个值：
0：请求未初始化，表示还未发起请求
1：请求已经提出，在请求发出去之前
2：请求已发送，这里通常能从响应得到头部信息
3：表示服务器正在处理中，还没处理完成
4：服务器已经处理完成，并且使用它
这些状态都要调用onreadystatechange对应函数
所以要写if语句，判断服务器是否处理完成
request.onreadystatechange = function(){
//这里要写一些代码
if (request.readyState == 4){
//从服务器获取数据的代码，并做相应处理
}
}
responseText
用来获取服务器的返回数据
request.onreadystatechange = function(){
//这里要写一些代码
if (request.readyState == 4){
//从服务器获取数据的代码，并做相应处理
alert(request.responseText);
}
}
还有一个responseXML函数
返回XML数据
XML DOM documentElement 属性
documentElement 属性可返回文档的根节点。
把请求发送到服务器，要它的两个方法
1.open()
三个参数：
GET/POST(表明这个Http方法)
URL(规定服务器端脚本的url)
异步处理的标志(规定应当对请求进行异步处理)
2.send()
可以将请求发送到服务器端
假设当前网页和请求的url是同一个页面
request.open(‘GET‘,‘test.txt‘,true);
request.onreadystatechange = function(){
//这里要写一些代码
if (request.readyState == 4){
//从服务器获取数据的代码，并做相应处理,一般是对responseText里面的数据进行解析，在相应的页面展示出来
alert(request.responseText);
}
}
request.send(null)
open打开的url为responseText获取的数据
三：运行环境
1.ajax核心
XMLHttpRequest对象
不同的浏览器创建对象的方式不同
2.运行环境
ajax需要在html当中运行，所以要搭建一个可以运行html的服务器
推荐xampp(入门的LAMP开发包)，开源免费网络服务器环境
xampp集成了多种网络服务器（mysql,apche,php）开发套件
下载地址 xampp网站
安装十分简单
安装后运行 Apache 输入http://localhost/进行验证
在JavaScript可以使用try...catch进行异常处理。例如：
try {
foo.bar();
} catch (e) {
alert(e.name + ": " + e.message);
}
语法：oElement = document .getElementById ( sID )
参数：sID――必选项。字符串 (String) 。
返回值：oElemen――对象 (Element) 。
说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 。
注意： document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
document.getElementById(‘vv‘).innerHTML = xmlHttp.responseText;
卧槽，写错两个单词：alert 和 XMLHttpRequest
四：获取服务器文件
ajax获取文件是通过ajax发送请求从服务器获取网址或者是文件地址，然后返回给ajax做一个处理
注意点：
1）在服务器（网页）当中运行
2）注意编码问题，编码统一
获取服务器文件或者接口的输出通过 responseText或者responseXML进行的
创建XMLHttpResponse对象，发送请求，返回状态，绑定事件（获取某个文件）
XML
首先XML是一种元标记语言，所谓“元标记”就是开发者可以根据自己的需要定义自己的标记，比如开发者可以定义如下标记<book> <name>，任何满足xml命名规则的名称都可以标记，这就为不同的应用程序打开了的大门。HTML是一种预定义标记语言，它只认识诸如<html>,<p>等已经定义的标记，对于用户自己定义的标记是不认识的。 第二xml是一种语义/结构化语言。它描述了文档的结构和语义。举个例子，在和html中，要描述一本书，可以如下表示：
所谓的xml,就是eXtensible Markup Language, 翻译成中文就是“可扩展标识语言“，在国内很多人理解xml为html的简单扩展，这实际上是一种误解。尽管xml同html关系非常密切。
XML与SGML、HTML的关系。
documentElement 属性
documentElement 属性可返回文档的根节点。
根据文档的根节点就可以向下继续查找了，是一种先查找到根节点再查找到其它内容的查询方式
getElementsByTagName() 方法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合
if (xmlHttp){
xmlHttp.open(‘GET‘, the_request_url, true);
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState ==4){
if (xmlHttp.status == 200){
document.getElementById(‘vv‘).innerHTML = xmlHttp.responseText;
}
}
};
function readyStateChangeHandle()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var xmlDOM=xmlHttp.responseXML;
var xmlRoot=xmlDOM.documentElement;
try
{
var xmlItem=xmlRoot.getElementsByTagName("item");
alert(xmlItem[0].firstChild.data);
}
catch(e)
{
alert(e.message);//返回错误信息
}
}
}
}
alert(xmlItem[0].firstChild.data); 获取查询到的第一个元素的子节点的数据
五：eval的使用
1.定义和使用：计算某个字符串，并执行其中的js代码
eval(string) 必须有string参数，含有表达式或执行语句
string有返回值的话，eval就返回string执行完毕的记过
string只接受原始字符串，如果不是string参数不是原始字符串，该方法不做任何改变
就返回
执行语句要合法，不然可能会报错
实例：
在js当中写
document.write(eval("2+2"));
可以输出4
var x = 10;
document.write(eval(x+7));
输出17
HTML DOM prompt() 方法
prompt() 方法用于显示可提示用户进行输入的对话框。
| text | 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。 |
| defaultText | 可选。默认的输入文本。 |
alert("Result:" + eval(prompt("Enter an expression", "")));
可以让用户输入一个表达式然后计算出结果返回
JSON
JSON轻量级数据交换格式
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构
简单地说[2] ，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序
在JSON对象两边加上小括号就可以转化js格式
使用JSON解析eval格式字符串
var txt = "{‘userid‘:11,‘name‘:‘liyi‘}";//JSON字符串
var txtObj = eval("("+txt+")");
document.write(txtObj.userid);
输出11
六：dom添加元素
Dom:文档对象模型
document对象
1.创建新的HTML元素
创建该元素
找一个已经存在的元素，去追加新元素
var param = document.createElement(‘p‘);var node = document.createTextNode("这是新文本");param.appendChild(node);var ele = document.getElementById("div1");ele.appendChild(param);
2.删除已有HTML元素
var ele = document.getElementById("div1");var child = document.getElementById("p1");ele.removeChild(child);
七：ajax封装库
多次重复使用的代码进行优化，封装，代码进行优化
1.原理讲解
ajax中每次不同的实例都会创建一个XMLHttpRequest对象，然后会响应一个callback函数，一般赋值给onreadystatechange属性
可以把XMLHttpRequest对象创建过程封装
回调函数实现封装
原来我创建一个XMLHttpRequest对象都会调用这个function啊
不仅可以将代码封装成函数也可以将代码封装成对象
function有好几种写法
function ajaxFunction(the_request_url){
xmlHttp.onreadystatechange = function(){
ajaxFunction : function(the_request_url){
this
直接在js代码当中代表的是 windos页面对象
在function当中，代表的function外面的js对象
JavaScript push() 方法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
JavaScript join() 方法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
| 参数 | 描述 |
|---|
| separator | 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 |
返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator 字符串而生成的。
obj1.method1.call(obj2,argument1,argument2)
如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入．
举一个具体的例子
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用
ajaxObj.setOptions.call(ajaxObj, options);
也就是
this.setOptions.call(this, options);
为什么都写的this却可以访问到不同的对象，都应该是当前对象啊，那第一个this应该是怎么访问到setOptions
innerHTML和value都可以用
封装为对象，封装为函数?
Ajax当中数据类型
ajax请求返回 json , xml, html, text, javascript
1.json
易于阅读和编写，采用与编程语言无关的格式
结构基于以下两点：
名称 / 值 在ajax中是一种特定的字符串形式来表示javascript对象
如果把这个字符串赋值给js变量，那该变量将变成一个对对象的引用
var User = {"id":11,"name":"liyi","qq":892124}User.name
2.XML
可扩展的标记语言
可以自己定义标签
<?xml version="1.0" encoding="UTF-8"?>声明xml文档<recipe> <name>li</name></recipe>
3.text
xxx.txt
4.html
5.javasript
eval(javascript)
只要不是xml文档格式，都可以用requestText访问到
document.getElementById(‘userpass2‘).value;这个可以获取输入的值
get() 方法
使用 AJAX 的 GET 请求来改变 div 元素的文本：
$("button").click(function(){
$.get("demo_ajax_load.txt", function(result){
$("div").html(result);
});
});get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
就是jQuery已经写好了ajax代码，等于是封装好的，直接用$符号调用GET或者POST就可以了
普通ajax实现就是先新建xmlHttpRequset对象，然后调用open还有send方法，其中还有字符串拼接，一些麻烦的操作，卧槽，真是日了狗了，学了几天，到头来都用不上我日
$(selector).get(url,data,success(response,status,xhr),dataType)
通过它，你可以遍历对象、数组的属性值并进行处理。
$.each(Object, function(p1, p2) {
this; //这里的this指向每次遍历中Object的当前属性值
p1; p2; //访问附加参数
}, [‘参数1‘, ‘参数2‘]);
可以这样理解，每次遍历，访问的是一个对象
$.each($.parseJSON(data),function(k,v){
str +=‘<li id="this_li" onclick="fun(this)">‘+v.fields.word_value+‘<li>‘;
});每次循环的this为一个js对象，$.parseJSON(data)将json数据转化为js对象，每个键值对转化为了一个js对象
function(k,v)为js对象的里面的两个参数，分别为key和value,可通过fields.word_value这种方式来取出key的值
jQuery.parseJSON()
函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象。
1 2 | var obj = jQuery.parseJSON(‘{"name":"John"}‘);
alert( obj.name === "John" );
|
mongod.exe --dbpath C:\MongoDb\data\db -logpath C:\MongoDB\data\log\mongolog.log
Ajax
标签：
原文地址：http://www.cnblogs.com/wuqingzangyue/p/5750025.html
