分享web开发知识

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

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

ajax起步 (二)

发布时间:2023-09-06 01:33责任编辑:顾先生关键词:暂无标签

Ajax的关键在于XMLHttpRequest对象,如下基本用法:

<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???</head> ???<body> ???????<div> ???????????<button>Apples</button> ???????????<button>Cherries</button> ???????????<button>Bananas</button> ???????</div> ???????<div id="target"> ???????????press a button ???????</div> ???????<script type="text/javascript"> ???????????var buttons=document.getElementsByTagName("button") ???????????for(var i=0;i<buttons.length;i++){ ???????????????buttons[i].onclick=handleButtonPress; ???????????} ???????????function handleButtonPress(e){ ???????????????var httpRequest=new XMLHttpRequest(); ???????????????httpRequest.onreadystatechange=handleResponse; ???????????????httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html") ???????????????httpRequest.send() ???????????} ???????????function handleResponse(e){ ???????????????if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){ ???????????????????document.getElementById("target").innerHTML=e.target.responseText; ???????????????} ???????????} ???????</script> ???</body></html>

    第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同,你并非通过浏览器定义的某个全局变量来访问这类对象,而是使用关键词new如:var httpRequest=new XMLHttpRequest();
    下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发,向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么,使用open方法来指定HTTP方法(在这里是GET)和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")注:

ajax起步 (二)

原文地址:https://www.cnblogs.com/Sarah119/p/8159404.html

知识推荐

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