Ajax

一: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;



我已经打开了http://localhost/xampp/ 然后点那个才能看到我本地的网站呀？

在你的xampp这个文件夹中找到htdocs文件夹，在这个htdocs文件夹中建立你的网站的目录，比如你的网站是test，那么就建立test文件夹，访问的时候就用http://localhost/test/ 就可以了！

卧槽，写错两个单词：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元素

创建该元素

找一个已经存在的元素，去追加新元素

  1. var param = document.createElement('p');
  2. var node  = document.createTextNode("这是新文本");
  3. param.appendChild(node);
  5. var ele = document.getElementById("div1");
  6. ele.appendChild(param);

2.删除已有HTML元素

  1. var ele = document.getElementById("div1");
  2. var child = document.getElementById("p1");
  3. 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变量，那该变量将变成一个对对象的引用
  1. var User = {"id":11,"name":"liyi","qq":892124}
  2. User.name
2.XML
可扩展的标记语言

可以自己定义标签
  1. <?xml version="1.0" encoding="UTF-8"?>声明xml文档
  2. <recipe>
  3.      <name>li</name>
  4. </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 




.html()可以将js代码转换为html代码








posted @ 2016-08-08 16:44  意发并行  阅读(278)  评论(0)  编辑  收藏  举报