分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

JS——AJAX

发布时间:2023-09-06 01:21责任编辑:郭大石关键词:暂无标签

向服务器发送请求如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:Open方法了有两种请求方式——get和post

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

1、无法使用缓存文件(更新服务器上的文件或数据库)

2、向服务器发送大量数据(POST 没有数据量限制)

3、发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

注释:send(string)方法只有当时post请求时才会传入参数

onreadystatechange 事件:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:

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

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

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

 GET请求:

<body> ???<button onclick="loadXMLDoc()">点击发送异步请求</button> ???<script> ???????function loadXMLDoc() { ???????????var xmlhttp = new XMLHttpRequest(); ???????????xmlhttp.onreadystatechange = function () { ???????????????if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { ???????????????????alert(xmlhttp.responseText); ???????????????} ???????????} ???????????xmlhttp.open("get", "person.ashx", true); ???????????xmlhttp.send(); ???????} ???</script></body>

PSOT请求:

<body> ???<button onclick="fs()">点击发送异步请求</button> ???<script> ???????var xmlHttp; ???????function GetXmlHttpObject() { ???????????if (window.XMLHttpRequest) { ???????????????// code for IE7+, Firefox, Chrome, Opera, Safari ????????????????xmlhttp = new XMLHttpRequest(); ???????????} else {// code for IE6, IE5 ????????????????xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ???????????} ???????????return xmlhttp; ???????} ????????function getOkPost() { ???????????if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) { ???????????????// 本地提示:加载中/处理中 ????????????} ???????????if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { ???????????????var d = xmlHttp.responseText; // 返回值 ????????????????// 处理返回值 ????????????????alert(d); ???????????} ???????} ???????function fs() { ???????????xmlHttp = GetXmlHttpObject(); ???????????if (xmlHttp == null) { ???????????????alert(‘您的浏览器不支持AJAX!‘); ???????????????return; ???????????} ???????????var url = "info.ashx"; ???????????xmlhttp.open("POST", url, true); ???????????xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ???????????var data = "name=wqx&age=10" ???????????xmlhttp.send(data); ???????????xmlHttp.onreadystatechange = getOkPost;//发送事件后,收到信息了调用函数 ????????} ??????????</script></body>

参考:W3C

JS——AJAX

原文地址:http://www.cnblogs.com/wuqiuxue/p/7760703.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved