阅读 85

JS 前后端交互方式—— ajax交换服务器数据过程及方法

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

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

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

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

实例

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //此处的this.responseText即为期望的数据
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
复制代码

代码流程:

第一步 创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();
复制代码

第二步 onreadystatechange 事件

每当 readyState 改变时,就会触发onreadystatechange事件。readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechang  每当 readyState 属性改变时,就会调用该函数。
readyState        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
status
    200: "OK"
    404: 未找到页面
复制代码

第三步 服务器响应

通过XMLHttpRequest 对象的 responseTextresponseXML 属性,获得来自服务器的不同数据格式的响应

获取responseText字符串形式的响应数据

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
复制代码

获取responseXML XML 形式的响应数据

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;
复制代码

第四步 向服务器发送请求

open(method,url,async)
    参数:
    method:请求的类型;GET 或 POST
    url:文件在服务器上的位置
    async:true(异步)或 false(同步)
xmlhttp.send();
复制代码

GET方法中为排除得到浏览器缓存的结果,请向 URL 添加一个唯一的 ID

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
复制代码

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

xmlhttp.open("POST","ajax_test.asp",true);
//setRequestHeader(header,value)
//参数:
//header: 规定头的名称
//value: 规定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
复制代码

使用POST的情况

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
复制代码

服务器端

前端发送带有参数的请求后,服务器端可以通过

1.asp/php文件
    将数据写在asp文件中,不对服务器进行调用,不含sql语句,返回文件中的数据
2.数据库文件
    通过sql语句对数据库进行调用,返回数据库数据
3.XML文件
    服务器页面实际上是xml文件,前端可以从xml文件中提取节点元素获取数据
复制代码
文章分类
前端
文章标签