您的位置：首页 > Web前端 > JavaScript

js-Ajax的作用及其函数的编写

2016-10-17 15:52 375 查看
什么是ajax？

AJAX就是Asynchronous JavaScript and XML（意思是说异步JavaScript 和XML）；它不是新的编程语言。而是一种使用现有标准的新方法,能够通过在后台与服务器进行少量数据交换，使得网页实现异步更新，实现在不重新刷新加载整个页面的情况下，只更新部分网页上的内容的技术。

传统网页和运用ajax技术的网页的工作流程：



1、传统的网页是没有使用AJAX,那么只要想更新内容，就必须重载整个网页。

上面示意图可以看出，传统的网页是这样的，浏览器向服务器发送请求，然后等服务器在后台处理好后返回信息到html档里面，但是每次都是处理一个请求后都要重新加载整个页面，步骤繁琐，加载网页的速度也降低。

2、使用ajax技术的网页，页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。



实际运用中的例子有：1、当你在百度搜索资料的时候，你在搜索框中输入你要搜索的信息，这时候会有个提示框弹出来，这个就是用到ajax；为什么会有提示框弹出一些跟你输入关键词差不多的提示呢，因为当你键入内容是，浏览器就向服务器发出请求，并返回处理后的信息回来。

为了更好的理解ajax，我们先学会使用，再学会怎么去编写自己的ajax。

先准备ajax.js文件（函数已经写好）和一个文件a.txt，放到服务器里面；

ajax.js文件代码如下：

function ajax(url,
fnSucc, fnFaild)

{

//1.创建Ajax对象

if(window.XMLHttpRequest)

{

var
oAjax=newXMLHttpRequest();

}

else

{

var
oAjax=newActiveXObject("Microsoft.XMLHTTP");

}


//2.连接服务器（打开和服务器的连接）

oAjax.open('GET',
url,true);



//3.发送

oAjax.send();


//4.接收

oAjax.onreadystatechange=function()

{

if(oAjax.readyState==4)

{

if(oAjax.status==200)

{

//alert('成功了：'+oAjax.responseText);

fnSucc(oAjax.responseText);

}

else

{

//alert('失败了');

if(fnFaild)

{

fnFaild();

}

}

}

};

}


ajax(url, fnSucc, fnFaild)函数参数介绍：

url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）

fnSucc:成功返回信息

fnFaild：失败返回信息

a.txt文件可以随便写内容到里面；

然后写一个文件读取a.txt的内容：

<!DOCTYPE HTML>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<scriptsrc="ajax.js"></script>

<script>

window.onload=function()

{

var
oBtn=document.getElementById('btn1');


oBtn.onclick=function()

{

ajax('aaa.txt',function(str){

alert(str);

},function(){

alert('失败');

});

};

};

</script>

</head>

 

<body>

<inputid="btn1"type="button"value="读取"/>

</body>

</html>


如果a.txt里面有中文，会出问题吗？记得要保证文件编码统一：utf-8

阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。getTime()是毫秒数

<!DOCTYPE HTML>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<scriptsrc="ajax.js"></script>

<script>

window.onload=function()

{

var
oBtn=document.getElementById('btn1');


oBtn.onclick=function()

{

ajax('aaa.txt?t='+newDate().getTime(),function(str){

alert(str);

},function(){

alert('失败');

});

};

};

</script>

</head>

 

<body>

<inputid="btn1"type="button"value="读取"/>

</body>

</html>


上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()；
[1,2,3,4,5,6,7]
读取数组：

<scriptsrc="ajax.js"></script>

<script>

window.onload=function()

{

var
oBtn=document.getElementById('btn1');


oBtn.onclick=function()

{

ajax('arr.txt?t='+newDate().getTime(),function(str){

var
arr=eval(str);

alert(arr[3]);

},function(){

alert('失败');

});

};

};

</script>


读取json：

[{a: 5, b: 7}, {a: 8, b: 12}]


<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('arr2.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
alert(arr[0].a);
}, function (){
alert('失败');
});
};
};
</script>


读取的json放大ul里面：

[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
}, function (){
alert('失败');
});
};
};
</script>
</head>
 
<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>


HTTP请求方法
GET——用于获取数据（如：浏览帖子）：不安全，放到url里面传递信息，通过网址传递，容易出错，因为有大小限制：4-10k,有缓存
POST——用于上传数据（如：用户注册）：稍微安全一些，不通过网址url，可以传大文件，2G，没有缓存

GET、POST的区别
get是在url里传数据：安全性、容量
缓存

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
 
<body>
<form action="http://www.baidu.com/" method="post">
用户名:<input type="text" name="username" /><br>
密码：<input  type="password" name="password" /><br>
<input type="submit" />
</form>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航