使用javascript来实现最原始的ajax操作

使用原生的javascript代码来实现ajax操作，可以看做ajax的入门

代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>ajax的测试页面</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->
<script type="text/javascript">//1.使用原生的javascript来实现ajax操作window.onload = function(){//2.获取a节点，并且为其添加onclick响应事件document.getElementById("ajax").onclick = function(){//3.创建XMLHttpRequest对象 var request = new XMLHttpRequest();//4.准备发送的数据var url = this.href;var method = "GET";//5.调用XMLHttpRequest的open()方法request.open(method,url);//6.调用XMLHttpRequest的send()方法request.send(null);//7.为XMLHttpRequest对象添加onreadystatechange响应函数request.onreadystatechange = function(){//8.判断响应是否完成，XMLHttpRequest对象的readyState属性值为4的时候if(request.readyState == 4){//9.在判断响应是否可用，XMLHttpRequest对象的status属性值为200if(request.status == 200 || request.status == 304){//10.打印响应结果，responseTextalert(request.responseText);}}}//11.取消超链接的默认行为return false;} }</script></head><body><a href="ajax/ajax.txt" id = "ajax">helloAjax</a></body>
</html>

结果如下：

使用javascript来实现最原始的ajax操作相关推荐

原始的Ajax请求方式（XMLHttpRequest）
■前言看到了最原始的Ajax的代码更多信息 (基础) https://www.cnblogs.com/web-record/p/10298832.html readyState 0: 请求未初始化 ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
Ajax操作--原声JSAJAX操作
Ajax介绍: Ajax的原理简单来说是在用户和服务器之间加了-个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作D ...
ajax操作oracle,AJAX操作流程
本章提供了AJAX操作过程步骤的清晰流程. AJAX操作的步骤发生客户端事件. 创建XMLHttpRequest对象. XMLHttpRequest对象创建成功并配置. XMLHttpRequest ...
JQuery Ajax操作
JQuery Ajax操作上回我们谈到Ajax操作分为JS Ajax.JQuery Ajax两种操作,上回具体讲解了JS Ajax操作,今天我们来小谈一下JQ Ajax操作 ...
Ajax操作的四个步骤
Ajax操作的四个步骤: 创建Ajax对象连接服务器发送请求接收返回信息 1 <!DOCTYPE html> 2 <html> 3 <head lang=" ...
laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）
laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高优势:减轻数据库压力缺 ...
ajax操作的链式写法
ajax操作的传统写法: $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenEr ...
php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作
我们在上网中都能看到很多能够排序的,如大小.时间.价格等现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄 ...

使用javascript来实现最原始的ajax操作

使用javascript来实现最原始的ajax操作相关推荐

最新文章

热门文章