Ajax中XMLHttpRequest的讲解

1.介绍

  

2.方法

  

  

3.程序位置设计

  

4.程序(针对XMLHttpRequest)

 1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 2     pageEncoding="ISO-8859-1"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     window.onload=function(){
10         document.getElementsByTagName("a")[0].onclick=function(){
11             //new XMLHttpRequest
12             var request=new XMLHttpRequest();
13
14             var url=this.href;
15             var method="GET";
16
17             request.open(method,url);
18             request.send(null);
19
20             request.onreadystatechange=function(){
21                 if(request.readyState==4){
22                     if(request.status==200||request.status==304){
23                         alert(request.responseText);
24                     }
25                 }
26             }
27             return false;
28         }
29     }
30 </script>
31 </head>
32 <body>
33     <a href="helloAjax.txt">hello click</a>
34 </body>
35 </html>

二.解释

1.发送函数

  

2.onreadystatechange处理函数

  

3.open方法

  

三:相应接受

1.接受函数

  

2.readState

  

3.reponseText方法

  

4.reponseXML

  

四:添加时间戳

1.url

  var url=this.href+"?time="+new Date();

五:注意点(post方法)

1.知识点

  

2.程序

 1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 2     pageEncoding="ISO-8859-1"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     window.onload=function(){
10         document.getElementsByTagName("a")[0].onclick=function(){
11             //new XMLHttpRequest
12             var request=new XMLHttpRequest();
13
14             var url=this.href;
15             var method="POST";
16
17             request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
18
19             request.open(method,url);
20             request.send("name=‘tom‘");
21
22             request.onreadystatechange=function(){
23                 if(request.readyState==4){
24                     if(request.status==200||request.status==304){
25                         alert(request.responseText);
26                     }
27                 }
28             }
29             return false;
30         }
31     }
32 </script>
33 </head>
34 <body>
35     <a href="helloAjax.txt">hello click</a>
36 </body>
37 </html>
时间: 2024-11-04 22:47:57

Ajax中XMLHttpRequest的讲解的相关文章

ajax中XMLHttpRequest 对象

一:XMLHttpRequest 对象的三个重要属性 1.onreadystatechange属性 onreadystatechange属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置: xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 } 2. readyState 属性 readyState 属性存有服务器响应的状态信息.每当readyState 改变时,onr

第108天:Ajax中XMLHttpRequest详解

在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据. XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后再客户端向服务器请求数据,在页面加载后在服务器端接收数据,在后台向客户端发送数据. XMLHttpRequest和Javascript Javascript本身并未具备向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面向服务器提交请求,要么使用XMLHttpR

ajax中XMLHttpRequest对象中readyState与status的几种常见状态

XMLHttpRequest对象的readyState与status的几种状态码表示的意思: readyState有五种状态: 0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法: 1 (载入):已经调用open() 方法,但尚未发送请求: 2 (载入完成): 请求已经发送完成: 3 (交互):可以接收到部分响应数据: 4 (完成):已经接收到了全部数据,并且连接已经关闭. status实际是一种辅状态判断,只是status更多是服务器方的状态判断.

Ajax 之XMLHttpRequest讲解

一直以来都听别人说Ajax,今天终于接触到了.......... 一.什么是Ajax? 答: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对

AJAX跨域完全讲解

AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候知道了为什么会存在跨域,以及跨域解决的方案有哪些,今天随着课程的学习,又加深了AJAX跨域的理解,以此记录下来. 为什么会发生产生跨域问题? 上面的图也很清晰了,因为浏览器为了安全(同源),本身就限制了. 当我们发送XMLHttpRequest请求的时候,如果请求的是别的域(主机域名.端口)不同时,

ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习

网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格</title> <script src="jquery-2.0.0.min.js"></script> <style type="text/css"> .sc { width:70px; height:30px; backgr

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h

ajax中的stasus错误详解

一.英文版解析 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is be

转:Ajax中的get和post两种请求方式的异同

1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址.用户看不到这个过程. 2. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据.两种方式的参数都可以用Request来获得. 3.get传送的数据量