Ajax原生使用

AJAX 应用

  • 运用XHTML+CSS来表达资讯;
  • 运用JavaScript操作DOM(Document Object Model)来执行动态效果;
  • 运用XML和XSLT操作资料;
  • 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换;
  • 注意:AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

什么是 AJAX ?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

AJAX = 异步 JavaScript 和 XML。

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

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

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

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

  AJAX应用程序与浏览器和平台无关的!


AJAX 工作原理

一个基本的ajax写法:

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}

XMLHttpRequest类的主要属性:
onreadystatechange
readyState
status
responseText

xmlhttp.onreadystatechange与readyState属性有关,当readyState改变时它才会触发。。
readyState状态码如下:
0:请求未初始化(还没有调用 open())。
1:请求已经建立,但是还没有发送(还没有调用 send())。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
4:响应已完成;您可以获取并使用服务器的响应了。
状态为0表明open的时候也是会触发onreadystatechange事件的

XMLHttpRequest实例化后的对象的主要属性
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

时间: 2024-10-30 17:54:37

Ajax原生使用的相关文章

Ajax原生请求和java对象转成json

\黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3 本代码中有模拟 jquery里面的对Ajax的简化封装: json2.jsp  Ajax原生请求 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@

HTML5+AJAX原生分块上传文件的关键参数设置

processData:false 这是jquery.ajax的一个参数.默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务端后会变成d[]=1&d[]=2的形式. 要将其设置为false后,才能上传ArrayBuffer对象,服务端直接从Request.InputStream获取原始字节流. w3school解释: processData 类型:Boolean 默认值: true.默认情况下,通过data选项传递进来的数

什么是Ajax与Ajax原生的实现方式

一.什么是Ajax? Aiax:异步的Javascript和XML. 作用:用于完成局部刷新 XML是用于数据传输,现在开始被JSON所替代. 1.1.交互方式问题 传统的交互方式每次都必须返回整个页面,宽带,响应速度都有影响的, Ajax的交互方式是从 客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后只返回页面需要的内容,XMLH

Ajax原生XHR对象

前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象. 先来明确什么是Ajax,Ajax:"Asynchronous JavaScript and XML",翻译过来就是异步JavaScript和XML. Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.意味这可以再不重新加载整个网页的情

ajax原生写法和jQuery写法

一.原生js写ajax请求 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>json实例</title> 6 </head> 7 <body> 8 <input id="btn" value="json" type=

Ajax原生的js(XMLHttpRequest对象)--实现局部刷新

AJAX 是一种用于创建快速动态网页的技术.(不用刷新整个页面和服务器通讯的方法 ) XMLHttpRequest对象:是对js的扩展,可以实现网页与服务器进行通信,通常把Ajax当做XMLHttpRequest对象的代名词. 客户端的语言一般是HTML,css,JavaScript:服务器端一般用PHP,jsp,ASP:中间传输的格式一般为HTML,xml,TXT,json:传输协议是http ajax需要某种格式化的格式在服务器和客户端之间传递信息,XML,JSON是常用的格式 DOM实现动

异步交互之Ajax原生编写

一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象.

ajax原生post请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>ajax 发送post</h1> <input type="text" value="" p

AJAX原生JavaScript写法

GET方式 1 //创建XMLHttpRequest对象,为考虑兼容性问题,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象 2 var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 3 4 //设定请求的类型,服务器URL,以及是否异步处理 5 ajax.open("get",&