ajax是什么?

ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站。在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情。自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新。

ajax能做什么?

在没有ajax的时候,当我们在进行表单验证的时候,我们必须输入完之后提交页面才能检查信息是否合法和有效,网页还得刷新,这样给用户的体验是非常的不好,用户辛辛苦苦输入的信息,当提交时候才发现信息有错误和不合法,这就造成了用户的体验不是特别的好。使用ajax技术之后,检查表单信息能够很快的从服务器获取信息,并且没有刷新,这样用户使用起来就非常的方便。ajax还能实现局部刷新,就像Google地图那样。

下面我们来学习一下怎么使用ajax?

在使用ajax之前必须很好的掌握XMLHttpRequest的对象,因为ajax的使用都在围绕着XMLHttpRequest对象进行。ajax的使用:

(1),首先创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

(2),调用XMLHttpRequest的方法open(),和send()

xmlhttp.open("GET","URL路径",true);
xmlhttp.send();

(3),服务器返回响应responseText
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
服务器返回的值赋值给myDiv的标签里。
但是这样还没有达到效果,必须判断http的状态,代码如下
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

ajax学习笔记1的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  3. 基于PHP的AJAX学习笔记(教程)

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  4. AJAX学习笔记

    AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...

  5. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  6. Ajax学习笔记2之使用Ajax和XML

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...

  7. Ajax学习笔记1之第一个Ajax应用程序

    代码 <head> <title>An Ajax demo</title> <script src="../js/jquery-1.4.1.js&q ...

  8. Ajax学习笔记(二)

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

  9. ajax学习笔记(原生js的ajax)

    ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...

随机推荐

  1. tomcat登陆WEB显示无权限问题&& tomcat无限循环启动问题

    tomcat登陆WEB显示无权限问题 The user specified as a definer (”@’%') does not exist 原因分析 因为创建视图使用的是xff@%用户(目前已 ...

  2. Visual Studio中的Build Event

    在VS中,进行build时,可以在build之前,或者之后执行一些操作,比如把一些css,font,images文件从一个项目的文件夹复制到另一个项目的文件夹 方法: 点击项目,右键-属性-Build ...

  3. ELK beats平台介绍(11th)

    beats是一个代理,将不同类型的数据发送到elasticsearch.beats可以直接将数据发送到elasticsearch,也可以通过logstash将数据发送elasticsearch. be ...

  4. cocos2d-x之蒙板,局部高亮可点,CCRenderTexture

    转自:http://www.2cto.com/kf/201207/144656.html 蒙板,局部高亮可点的用处大多是在新手引导的时候,引导玩家一步一步的走游戏的操作流程. 之前写了一个cocos2 ...

  5. 【转载】Android Studio 设置内存大小及原理

    http://www.cnblogs.com/justinzhang/p/4274985.html http://tsroad.lofter.com/post/376316_69363ae Andro ...

  6. 【转】CppUnit使用简介

    以下内容来自:http://www.cnblogs.com/wishma/archive/2008/08/01/1258370.html 1. 简介 CppUnit 是个基于 LGPL 的开源项目,最 ...

  7. CDOJ 1157 数列(seq) 分块+线段树

    数列(seq) Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1157 Desc ...

  8. linux netlink套接字学习资料

    理论: http://blog.csdn.net/unbutun/article/details/3394061 进一步深入: http://edsionte.com/techblog/archive ...

  9. [React Native] Using the WebView component

    We can access web pages in our React Native application using the WebView component. We will connect ...

  10. petshop4.0 具体解释之中的一个(系统架构设计)

    前言:PetShop是一个范例,微软用它来展示.Net企业系统开发的能力.业界有很多.Net与J2EE之争,很多数据是从微软的PetShop和Sun的PetStore而来.这样的争论不可避免带有浓厚的 ...