Ajax
一:Ajax简介
这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用
因为页面提交数据的时候,到服务器响应,返回一个新的网页,应用的响应时间取决于服务器的响应时间,所以用户的响应时间会慢很多
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中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构
在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..这些做为参数传入.
如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1..这些做为参数传入.
举一个具体的例子
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
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 |
|
mongod.exe --dbpath C:\MongoDb\data\db -logpath C:\MongoDB\data\log\mongolog.log
.html()可以将js代码转换为html代码