ajax读取文本文件的格式,该怎么处理

 我来答
清风之无痕岁月05
2017-03-28 · TA获得超过236个赞
知道小有建树答主
回答量:487
采纳率:77%
帮助的人:144万
展开全部

这是我笔记

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

一. AJAX - 创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

XMLHTTP = new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

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


为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest  

对象。如果不支持,则创建 ActiveXObject :

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

二. AJAX - 向服务器发送请求

读取test1.txt文本

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

方法 描述

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

• method:请求的类型;GET 或 POST

• url:文件在服务器上的位置

• async:true(异步)或 false(同步)


send(string) 将请求发送到服务器。

• string:仅用于 POST 请求

GET 请求

一个简单的 GET 请求:

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

在上面的例子中,您可能得到的是缓存的结果.比如读取文件test1.txt一次后,再次点击按钮不读取.

为了避免这种情况,请向 URL 添加一个唯一的 ID:或者在后面添加用个变动的字符.

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();


POST 请求

一个简单 POST 请求:

xmlhttp.open("POST","demo_post.asp",true);

xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

方法 描述

setRequestHeader(header,value) 向请求添加 HTTP 头。

• header: 规定头的名称

• value: 规定头的值

url - 服务器上的文件


异步 - True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

在等待服务器响应时执行其他脚本

当响应就绪后对响应进行处理


Async = true

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

xmlhttp.onreadystatechange=function()

{

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

{

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

}

}

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

三. AJAX - 服务器响应

接收传送过来的数据,用对应语言的from 或get方法.

输出文本在客户端用

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 属性

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

responseXML 属性

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;

四. AJAX - onreadystatechange 事件

通过事件来触发判断是否接收成功.和接收数据.改变前台内容.当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:

下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述

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

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

&#8226; 0: 请求未初始化

&#8226; 1: 服务器连接已建立

&#8226; 2: 请求已接收

&#8226; 3: 请求处理中

&#8226; 4: 请求已完成,且响应已就绪

status 200: "OK"

404: 未找到页面

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url,cfunc)

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

xmlhttp.onreadystatechange=cfunc;

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

function myFunction()

{

loadXMLDoc("/ajax/test1.txt",function()

{

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

{

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

}

});

}

</script>

服务器端通对应的方法POST GET 等 接收 .输出 是直接输出..

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式