初学者必读原生AJAX-异步的javaScript和XML

1.前台页面

<form action="#" method="post">

  姓名<input type="text" name="first" id="first" />

  <span id="show"></span>

</form>

action="#" 是提交到本个页面内

2.在head标签元素加入AJAX代码

其实这个AJAX功能即是这个check(str)函数

这个函数的功能即是:传入一个字符串HELLO到后台服务器中,后台的程序经过处理之后(假设这个程序的功能即是大写转换成小写)再把hello传给这个函数,然后这个函数负责把这个responseTest   hello插入到innerHTML文档之中

这个实现AJAX的函数功能即是:传入字符串HELLO -------用open或者send方法把这个HELLO传到后台的处理程序

----后台处理程序把大写换成小写hello------然后这个函数用document.getElementById("show").innerHTML=x.responseText;把处理好的hello插入到HTML页面之中

去讯和面试第一次听说阿贾克斯,本质就是一个函数,和后台交互的函数

<script type="text/javascript">

    function check(str){

    if(window.XMLHttpRequest){
        var x=new XMLHttpRequest();   //创建对象x
    }else{
        var x=new ActiveXObject("Microsoft.XMLHTTP");
    }

    x.open("GET","test2.php?c="+str+"&q="+new Date(),true);//open方法客户端准备发送给test2.php处理
    x.send();     //客户端发送。这2步就是请求request

    x.onreadystatechange=function ff(){
        if(x.readyState==4 && x.status==200){//客户端判断条件
    //客户端显示
       document.getElementById("show").innerHTML=x.responseText;
  }
}
}
</script>                            

3.后台程序

<?php
if($_GET["c"]==""){  //如果$_GET["c"]为空
echo "empty";    //就输出empty
}else{     //否则
echo $_GET["c"];     //输出发送过来的数据
}
?>

时间: 2024-08-04 12:48:42

初学者必读原生AJAX-异步的javaScript和XML的相关文章

ajax 传值,Ajax: Asynchoronous Javascript and xml (异步的js和xml). 异步刷新,异步传递.替代表单提交数据,回调函数处理返回的数据

aspx里的代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="s

什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思:异步JavaScript和XML。

指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Standards-Based Presentation )XHTML+CSS的表示, 使用 DOM( Document Object Model )进行动态显示及交互, 使用 XML 和 XSLT 进行数据交换及相关操作, 使用 XMLHttpRequest 进行异步数据查询.检索. AJAX优点 lAj

原生AJAX基础讲解及兼容处理

原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它可以在不重载(刷新)整个页面的情况下与服务器进行数据交互并更新网页模块. AJAX的优点有很多:可以局部刷新.按需加载,这样就减轻了服务器的数据流量.并且在页面更新的同时,用户可以浏览器网页的其它内容而不受影响,也减轻了结构负担.AJAX也不是万能的,在有以上优点的同时SEO也受到了影响. 在学习A

ajax简介+原生ajax代码

Ajax (Asynchronous Javascript And XML),翻译过来就是异步Javascript和XML:是一种在网页上与服务器进行交互的技术.它异步交互的特性,能够在不刷新页面的情况下,对服务器发出请求并获取数据,再利用js处理数据,显示在原网页上:实现局部刷新的效果. Ajax是通过XMLHTTPRequest这个核心对象,来完成与web服务器的交互 原生js实现Ajax:http://www.cnblogs.com/colima/p/5339227.html

Ajax_Asynchronous javascript and XML

Ajax 是 Asynchronous javascript and XML(异步的JavaScript与XML技术)的缩写,是由HTML.javascript技术.DHTML和DOM组成. -javascript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信. -DHTML 或 Dynamic HTML,用于动态更新表单.我们将使用 div.span 和其他动态 HTML 元素来标记 HTML. -文档对象模型 DOM 用于(通过 javascript 代码)处理

原生Ajax(XMLHttpRequest)

一.什么是Ajax: 全称Asynchronous JavaScript and XML: 异步的 JavaScript 和 XML: 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据并更新部分网页内容: 二.Ajax之XMLHttpRequest: 1)五步使用法: 1.创建XMLHTTPRequest对象 2.使用open方法设置和服务器的交互信息 3.设置发送的数据,开始和服务器端交互 4.拿到数据后执行相关操作 这是GET请求: HTML: <a class="bt

js中的原生Ajax和JQuery中的Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,String url,boolean asynch);        准备请求:             url:            get/post            true/false:            true:异步            false:同步 readyState  

Servlet处理原生Ajax请求

萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生的目的是用于实现页面的局部刷新.通过Ajax技术可以使之前的应用程序在每次提交时不用进行页面的整体刷新,从而提升操作的性能. 2. Servlet概念     Servlet(服务器端小程序)是使用java编写的服务器端小程

php下的原生ajax请求

浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchronous Javascript And XML)其实就是通过XHR对象,执行HTTP请求. 1.创建XHR对象 var xhr = new XMLHttpRequest(); //暂不考虑兼容 2.XHR的对象属性和方法 方法: open("get/post", url, true/false)