博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js中的ajax
阅读量:6280 次
发布时间:2019-06-22

本文共 1523 字,大约阅读时间需要 5 分钟。

ajax全名就是 “asynchronous javascript and xml” 他到底是什么?

怎么获取数据

  • 学习表单之后我们知道,如果想把数据提交到服务器,或者是从服务器取出数据,我们都是通过表单的提交操作,而我们获取数据的方式呢,就是依靠页面的全部的刷新来实现的

  • ajax不用这么麻烦,因为每次刷新页面,是很麻烦的,ajax模式是通过xmlhttprequest对象来实现和服务器之间的信息的交互的。

环境的搭建

  • 由于讲解的ajax方法需要与web服务器进行交互,所以呢,我们需要下载一个工具包。包含Apache MySQL PHP PHPmyadmin 等,类似的环境有很多种,大家可以根据个人喜好来安装。

第一个例子。看看js的ajax操作

  • 表单页面的编写

     

    1)首先。完成 ff 函数 ,当点击按钮的时候,实现对应的操作

    function ff(){
    }

    2)声明一个空对象来存放XMLHttpRequest对象 

    var xmlHttpReq=null ;

    3)给XMLHttpRequest对象赋值

    if (window.ActiveXObjet) {
    xmlHttpReq = new Active XObjet("Microsoft.XMLHTTP") } else if (window.xmlHttpRequest) { xmlHttpReq = new xmlHttpRequest(); }

    4)实例化完成之后,使用open() 方法初始化 

    XMLHttpRequest 对象 
    xmlHttpReq.open(“GET”,”test.php”,true)

    //调用open方法并且采取的是异步的操作

    5)因为要做一个异步的调用,所以呢,需要注册一个XMLHttpRequest对象,将调用的回调时间处理器,当他的onreadystastechange 属性改变的时候,就会激发一个readystatechange 事件

    xmlHttpReq.onreadystastechange=resCallBack;

    // 设置回调函数

    6)使用send参数来发送请求。

    • 如果请求使用的是 GET 方式。则在发送的时候,就 不需要再指定参数了,或者是指定为 null 参数
    • 如果用到的是 POST 方法,那么就需要在 send 的时候,再指定相应的参数。

      当请求的状态改变的时候,XMLHttpRequest对象会调用onreadystastechange 属性注册的事件处理器,所以,相应该事件之前,会先检查 readystatechange的值和http 的状态。当请求完成加载,也就是readystatechange的值为4 的时候,并且响应成功,也就是http 的状态值为200 的时候,就可以调用js的函数来处理响应的内容了。

      代码如下

      function resCallBack() { if (xmlHttpReq.readystate == 4) { if (xmlHttpReq.status==200){ document.getElementById('res').innerHTML=xmlHttpReq.responseText; } } }

      以上就是ajax技术的全部。他不需要将页面的全部内容都发服务器,而是按照需要,选择性的发送页面当中的一部分的内容 

      使用js启动一个请求并处理相应的返回值,然后使用浏览器的DOM方法来更新页面的内容

转载于:https://www.cnblogs.com/yiyistar/p/6762567.html

你可能感兴趣的文章
数据挖掘工具分析北京房价 (一) 数据爬取采集
查看>>
IOS项目之弹出动画终结篇
查看>>
iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist)
查看>>
OSS移动开发实战2 (30分钟快速搭建移动应用上传回调服务)
查看>>
Swift语言学习No.2: 二维数组
查看>>
SQL性能优化概要
查看>>
Mysql主从同步失败
查看>>
Linux几个常用的小命令-我最喜欢chmod
查看>>
金蝶随手记团队分享:还在用JSON? Protobuf让数据传输更省更快(实战篇)
查看>>
电商外包众生相:从淘宝吃饭到海外运营
查看>>
模块化编程之require.js
查看>>
php字符函数的学习
查看>>
Android进阶之AIDL的使用详解
查看>>
VMware 上网的三种方式
查看>>
backtrack5使用notepad++
查看>>
JSON-lib框架,转换JSON、XML
查看>>
UITableView常见问题
查看>>
优化Linux 的内核参数来提高服务器并发处理能力
查看>>
同步与异步、阻塞与非阻塞
查看>>
Python操作mysql数据库
查看>>