Ajax基础知识分享

整理的一点有关ajax的知识,给大家分享下!

说到ajax首先我们先要了解一下关于ajax的原理和XmlHttpRequest对象:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器获得数据,然后用javascript来操作DOM而更新页面,这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理。

XMLHttpRequest用于后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网站部分进行更新,当请求被发送到服务器时,每当readyState改变时,就会触发onreadystatechange事件,readyState属性存有XMLHttpRequest的状态信息,下面是XMLHttpRequest对象的三个重要的属性:

1.onreadystatechange存储函数(或函数名),每当readyState属性,就会调用该函数。

2.readyState存有XMLHttpRequest的状态,从0到4发生变化:

                             1.0:请求未初始化。    

                             2.1:服务器连接已建立。

                             3.2:请求已接受。

                             4.3:请求处理中。

                             5.4:请求已完成,且响应已就绪。 

3.status:

    1.200:"OK"

    2.404:未找到页面

4.status Text伴随状态码的字符串信息。

5.responseText从服务器进程返回数据的字符串形式。

6.responseXML从服务器进程返回的DOM兼容的文档数据对象。

window.onload = function() {

                var oBtn = document.getElementById(‘btn‘);

                oBtn.onclick = function() {
            //判断浏览器的兼容          var xhr;                    if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();          } else{            xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);          }
                    //使用XMLHttpRequest创建对象
                    var xhr = new XMLHttpRequest();

                    //在地址栏输入传输方式、文件地址、同步或者异步。
                    xhr.open(‘get‘, ‘1.txt‘, true);
                    //提交
                    xhr.send();

                    //等待服务器返回内容
                    xhr.onreadystatechange = function() {
                        //readyState == 4表示请求已完成,且响应已就绪
                        if(xhr.readyState == 4) {
                            alert(xhr.responseText);
                        }

                    }

                }
            }

  如上所示,函数首先检查XMLHttpRequest的整体状态并且保证它完成请求。

接下来我在说一下将请求发送到服务器用到的方法:

  1.open规定请求的类型、url以及是否异步处理请求,method:请求的类型;GET或POST,url:文件在服务器上的位置。async:true同步或者异步。

  2.send(string)将请求发送到服务器。string:仅用于POST请求。

这是本人整理的一些有关ajax的基础的东西,希望对大家有帮助,同时也请大神们指导指导!!!!!!                                             2016-08-03

 

时间: 2024-12-09 11:08:53

Ajax基础知识分享的相关文章

原生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

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

11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回值,页面都是ajax处理的. ajax的写法: test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

XML的相关基础知识分享(二)

前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义的,当两个不同的文档使用相同的原俗名时,就会发生命名冲突.例如:下面这个XML文档携带者某个表格中的信息: 1 <table> 2 <tr> 3 <td>Apples</td> 4 <td>Bananas</td> 5 </tr&g

编程基础知识分享——编程开始之前

对我来说,编程这件事与其说是工作,不如说是兴趣.尽管和自己理想中的编程比,自己的所谓编程只不过是小打小闹,但是现在又有多少所谓的IT从业者是做真正的编程?产业化的今天,其实真的没有必要区分所谓的程序员和码农,每个人的路线和生活都不相同,也不可能相同,有人学编程只是为了一份工作,有人纯粹为了爱好.我的理解,无论出发点如何,只要尊重自己的选择,能够有所收获就够了. 这系列文章,是自己当初学习编程的一些方法和经验,整理了一下,可以分成几块记录.对于专业的程序员,我的经验并不适合,一些计算机专业出身的朋

python相关的基础知识分享

今日面试,,才发现lambda和fibonacci都忘了怎么写,一年半载没有频繁的用py,以往的兴趣因生活的忙碌而显得生疏了,还好,之前学习整理的文档都放在了网站上,以备查验. 分享出来解决方案: http://www.pcswo.com/static/file/python/basis/function/generator-eg.py >>> m = lambda x,y,z: (x-y)*z >>> print(m(3,1,2)) 4 >>> de

Ajax基础知识一。

了解Ajax对他的的基本内容进行一个悠闲的了解. 之前一直对Ajax不了解,在大学中也没有好好地学习一番,一直没有运用到实践中.现在学习基本的知识,填补一下那片海中的Ajax概念. 以下为整理总结的内容. 1.Ajax向服务器发送请求: 使用XMLHttpRequest 对象的open()和send()方法: open(method,url,async),method:表示请求的类型有GET和POST url:文件在服务器上的位置.async:true(异步)或者false(同步) send(S

docker 基础知识分享ppt

给团队做的docker基础分享ppt, 见下面的附件. https://files.cnblogs.com/files/harrychinese/docker_intro.pptx 原文地址:https://www.cnblogs.com/harrychinese/p/docker_ppt.html