AJax学习笔记
Ajax:
1.创建Ajax异步对象，在不同的浏览器有不同的方式！！必须做浏览器兼容代码
//创建xhr对象 兼容方式
function createXmlHttp() {
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari ，ie10
xhobj = new XMLHttpRequest();
}
return xhobj;
}
2.如果使用get请求相同的url，那么浏览器会直接从缓存中读取页面结果，而不会去服务器拿数据。
如果使用get请求，不想读取浏览器缓存的话要加上下面的代码：
xhr.setRequestHeader("If-Modified-Since",0);
3.Ajax是一种异步的js，他不是一种新的技术，而是将多种技术整合在一起的技术，是一种浏览器
端的技术，主要目的是在于局部的和服务器交互而不用刷新整个页面
4.XMLHttpRequest对象是Ajax的核心，可以异步的从服务器获取txt或者xml数据
5.使用Ajax实现省市下拉框部分代码：
兼容浏览器的Ajax写法Get版：
function Ajax(url,onsuccess)
{
var aj = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
aj.open("Get",url,true); //Get请求通过url直接传递参数
aj.onreadystatechange = function()
{
if(aj.readyState == 4 && aj.status == 200)
{
onsuccess(aj.responseText);
}
}
aj.send();
}
兼容浏览器的Ajax写法Post版：
function Ajax(url,onsuccess,参数)
{
var ajax = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");
ajax.open("Post",url,true);
ajax.setRequstHeader("Content-Type","application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if(ajax.state == 4 && ajax.status == 200)
{
onsuccess(ajax.responseText);
}
}
ajax.send(参数); //Post方式在send中添加参数传送
}
7.ajax实现删除：在服务器的数据库中删除数据之后，前台页面对应的行的要被删除
var a = document.getElementById("");
var tr = a.perantNode.perantNode;//a的父节点是td，td的父节点是tr
tr.perantNode.RemoveChild(tr);//tr的父节点是table，调用table的删除子节点的方法删除tr这个行
8.在js中将中文编码使用encodeURI("中文");
9.Ajax的readySate：
0 未初始化，new完后
1 已打开，创建完成并初始化，但还没有send
2 已发送，已经调用send，正在等待状态码的返回
3 正在接收，但是还不能用，响应消息还不完整
4 已加载，所有数据加载完毕
10.Ajax的常用方法：
abort：取消请求
open：初始化
send：发送请求
setHttpRequestHeader:添加自定义HTTP头到请求
getAllResponseHeaders：获取整个HTTP响应头的列表
getResponseHeader：仅获得指定的响应头
11.Ajax异步对象不能请求非本网站的页面，如：百度的Ajax不能给谷歌的服务器发送请求，浏览器
会报错，没有权限，这是一种安全机制
解决方案：
使用script标签。script标签可以跨网站发送请求，如：在百度的服务器上有<script src="http://www.google.com/GetData.ashx">，将请求google服务器的一个页面，该页面context.Response.Write("var myData = " + res);返回的js对象作为全局对象，即在百度服务器的页面都可以访问这个返回的对象（等于在百度页面上定义了一个全局的对象），这样就可以实现使用js进行跨域请求，JsonP技术，其实是js的一种使用方法，并不是一个新的技术
以上是JsonP的第一种用法，获得另外一台服务器动态页面返回的js数据
第二种方法，获得另外一台服务器动态页面返回的js数据，并且传方法名参数给服务器，由服务器返回的js代码调用这个方法（最流行的一种用法），例子：
服务器端：string funcName = context.Request.QueryString["funcName"];
context.Response.Write(funcName + "(" + res + ");");
浏览器端：
var sc = document.creatElement("script");
sc.src = "http://另外一条服务器的域名?funcName=MyData";
document.body.appendChild(sc);//这个script标签里面的内容是另外一台服务器发回来 的js代码
//下面这个方法必须有，不然服务器发回来的方法不存在，
function MyData(data)
{
alert(data);
}
1.创建Ajax异步对象，在不同的浏览器有不同的方式！！必须做浏览器兼容代码
//创建xhr对象 兼容方式
function createXmlHttp() {
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari ，ie10
xhobj = new XMLHttpRequest();
}
return xhobj;
}
2.如果使用get请求相同的url，那么浏览器会直接从缓存中读取页面结果，而不会去服务器拿数据。
如果使用get请求，不想读取浏览器缓存的话要加上下面的代码：
xhr.setRequestHeader("If-Modified-Since",0);
3.Ajax是一种异步的js，他不是一种新的技术，而是将多种技术整合在一起的技术，是一种浏览器
端的技术，主要目的是在于局部的和服务器交互而不用刷新整个页面
4.XMLHttpRequest对象是Ajax的核心，可以异步的从服务器获取txt或者xml数据
5.使用Ajax实现省市下拉框部分代码：
兼容浏览器的Ajax写法Get版：
function Ajax(url,onsuccess)
{
var aj = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
aj.open("Get",url,true); //Get请求通过url直接传递参数
aj.onreadystatechange = function()
{
if(aj.readyState == 4 && aj.status == 200)
{
onsuccess(aj.responseText);
}
}
aj.send();
}
兼容浏览器的Ajax写法Post版：
function Ajax(url,onsuccess,参数)
{
var ajax = window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");
ajax.open("Post",url,true);
ajax.setRequstHeader("Content-Type","application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if(ajax.state == 4 && ajax.status == 200)
{
onsuccess(ajax.responseText);
}
}
ajax.send(参数); //Post方式在send中添加参数传送
}
7.ajax实现删除：在服务器的数据库中删除数据之后，前台页面对应的行的要被删除
var a = document.getElementById("");
var tr = a.perantNode.perantNode;//a的父节点是td，td的父节点是tr
tr.perantNode.RemoveChild(tr);//tr的父节点是table，调用table的删除子节点的方法删除tr这个行
8.在js中将中文编码使用encodeURI("中文");
9.Ajax的readySate：
0 未初始化，new完后
1 已打开，创建完成并初始化，但还没有send
2 已发送，已经调用send，正在等待状态码的返回
3 正在接收，但是还不能用，响应消息还不完整
4 已加载，所有数据加载完毕
10.Ajax的常用方法：
abort：取消请求
open：初始化
send：发送请求
setHttpRequestHeader:添加自定义HTTP头到请求
getAllResponseHeaders：获取整个HTTP响应头的列表
getResponseHeader：仅获得指定的响应头
11.Ajax异步对象不能请求非本网站的页面，如：百度的Ajax不能给谷歌的服务器发送请求，浏览器
会报错，没有权限，这是一种安全机制
解决方案：
使用script标签。script标签可以跨网站发送请求，如：在百度的服务器上有<script src="http://www.google.com/GetData.ashx">，将请求google服务器的一个页面，该页面context.Response.Write("var myData = " + res);返回的js对象作为全局对象，即在百度服务器的页面都可以访问这个返回的对象（等于在百度页面上定义了一个全局的对象），这样就可以实现使用js进行跨域请求，JsonP技术，其实是js的一种使用方法，并不是一个新的技术
以上是JsonP的第一种用法，获得另外一台服务器动态页面返回的js数据
第二种方法，获得另外一台服务器动态页面返回的js数据，并且传方法名参数给服务器，由服务器返回的js代码调用这个方法（最流行的一种用法），例子：
服务器端：string funcName = context.Request.QueryString["funcName"];
context.Response.Write(funcName + "(" + res + ");");
浏览器端：
var sc = document.creatElement("script");
sc.src = "http://另外一条服务器的域名?funcName=MyData";
document.body.appendChild(sc);//这个script标签里面的内容是另外一台服务器发回来 的js代码
//下面这个方法必须有，不然服务器发回来的方法不存在，
function MyData(data)
{
alert(data);
}
