AJAX基础整理1

  AJAX一直以来没怎么接触,主要是做JSON数据在服务器和客户端之间传递的时候,被玩坏了,对它莫名的不可爱,最近心理阴影小了,于是又来看看它.......

  AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  以上是百度到的。。。

  下面自己找着教程归纳了一些。

  Asynchronous 异步通信。实现局部刷新。比如说表单注册,如果传统的页面中,如果整体传送,浪费资源。而现在的方式则是部分发送,而且可以后台发送。这就是异步的特点。而不是单一的流水线过程。提高用户体验,节约网页流量。数据一般用JSON。

  一般涉及到javascript,JSON,DOM操作。

  下面通过一个搜索框提示功能演示实例来体现AJAX的原理。

  典型的AJAX编程模板:1.创建XMLHttpReqeust对象  2.open操作初始化请求信息 3.监听处理相应结果 4.send操作发出请求。

  1.创建XMLHttpReqeust对象 :var xhr=new XMLHttpRequest();大部分浏览器都有这个函数,但是ie6浏览器低版本没有内置XMLHttpRequest(),但是ie6有一个ActiveXObject。这时候比较兼容性的创建XMLHttpRequest对象的方法如下:

//1.创建XMLHttpReqeust对象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                try{
                    xhr=new ActiveXObject(‘Msxml2.XMLHTTP‘);
                }catch (e){
                    try{
                        xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘);
                    }catch (e){}
                }
            }

  2.AJAX请求的发起

  重点有两个方法要掌握:open和send。open是初始化,而send是真正发起请求的方法。

  xhr.open(‘GET‘,‘http://test/keyword/hit?keyword=c‘,true);

  第一个参数是确认当前请求的提交方式,第二个参数是确定当前请求的目标,即url,第三个参数是确定请求时同步(false)还是异步(true),第四和第五一般不用,是帐户名和密码。

  open执行之后,就可以执行send方法了。如果open方法用的是GET方法,请求内容放到了url中,这时候send方法就不用传递参数,直接send();如果是post方法,则send方法加如参数,如xhr.send(‘keyword=c&other=‘);这是编码的方式urlencoded。当然还可以用JSON数据处理的方式,send一个字符串的形式。即:

  xhr.setRequestHeader("Content-Type","application/json");//给当前的请求设置json标志。

  xhr.send(JSON.stringify({keyword:‘c‘,other:‘test‘}));JSON对象序列化格式化成JSON格式数据。不支持JSON的浏览器,有一库json2.js实现兼容。

  setRequestHeader除了Content-Type方法外,还可以加自定义的头。

  3.AJAX响应的接收和处理

  onreadystatechange接收时要先通知服务器可以接了。onreadystate的值,包括5种状态:

  0:未初始化;1:连接建立,请求发出;2:服务器返回响应;3:交互(处理相应数据);4:完成,数据可交付客户端使用。同时还要知道HTTP status的状态码:200,403,404,500..

  xhr.onreadystatechange=function(e){

  if(xhr.readyState===4&&xhr.status==200){}}

  数据准备就绪后,怎么处理?

  responseText:JSON.parse(xhr.responseText);字符串变为对象。

  还可以从响应结果中获取:getResponseHeader,getAllResponseHeader,status,statusTe。

  在浏览器F12中的Network中数据包中查看具体的数据。

总结:

XMLHttpReqeust APIAJAX编程模板

  

时间: 2024-08-28 04:48:56

AJAX基础整理1的相关文章

【javascript】ajax 基础 --本文转载

[javascript]ajax 基础 什么是 ajax ajax 即"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 a

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

基于JS的DOM 编程基础和Json语法及JS下的AJAX基础

1.在dom编程中:     注意:使用dom操作一般在页面完全载入之后,一般在window_onload事件里操作dom nodeName  表示节点的名称如:<input   type= "button"  value="确定" />    此时nodeName=“input” ; nodeValue  表示节点的值如<p>aaa</p> 此时的nodeValue="aaa",而nodeName="

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A

HTML基础整理(一)

HTLM基础整理--思维导图(标签部分) 其他: <sub>下标</sub>     <sup>上标</sup> 优先级,越往后优先级越高. "right"(右对齐)               "top" (顶部) 对齐方式<tr align="center"(居中) valign="middle"(居中) "left"(左对齐)          

Ajax基础知识 浅析(含php基础语法知识)

1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo "<div>Hello World!</div>"; ?> (2) $  变量声明  如果只声明不赋值,会报错 <?php $num=123; echo $num; echo "<div>编号为:".$num."&l

【Java EE 学习第31天】【JavaScript基础增强】【Ajax基础】【Json基础】

一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使用,所以不推荐使用,最好使用open方法弹窗. (2)open方法. (3)open方法弹窗实例. Base.html文档: <!DOCTYPE html> <html> <head> <title>Base.html</title> <met

ajax 基础实例

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 优点:使用ajax读取数据文件,不需要刷新页面就能取出文件数据<br><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition