博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day57——ajax之初体验
阅读量:5202 次
发布时间:2019-06-13

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

转行学开发,代码100天——2018-05-12

 

今天是一个特别的日子——首先是母亲节,在此也祝福亲爱的妈妈健康长寿。其次今天是汶川大地震10周年,10年过去了,经历过苦难的人更加坚毅勇敢地面向未来!

祝福,祝愿!

 

今天记录的是一节ajax的学习笔记。初步了解和尝试ajax的使用。

关于ajax的基本概念就不在此赘述了。直接说明ajax的应用步骤。

1.创建ajax对象

// Old compatibility code, no longer needed.if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...    httpRequest = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE 6 and older    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}

这里,需要考虑兼容性,此段代码可以作为基本代码段直接复用。

2.连接到服务器

其基本语句结构为:httpRequest.open(方法,文件,异步传输); 如:
httpRequest.open('GET', 'http://www.example.org/some.file', true);

参数1:连接服务器的常用方法有“GET”,"POST"方法。

区别一:

get是从服务器上获取的数据。

podt则是向服务器传送数据。

区别二:

get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。

post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

区别三:

get方式,服务器端用Request.QueryString获取变量的值。

post方式,服务器端用Request.Form获取提交的数据。

区别四:

get传送的数据量较小,不能大于2KB。

post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

区别五:

get安全性比较低。

post安全性较高。

 参数2:请求文件

参数3:true 异步传输(默认值);false 同步传输

3.发送请求

httpRequest.send();

4.接收返回值

httpRequest.onreadystatechange = nameOfTheFunction;
nameOfTheFunction 用于对返回值进行下一步处理: readyState 
if (httpRequest.readyState === XMLHttpRequest.DONE) {    // Everything is good, the response was received.} else {    // Not ready yet.}

readyState 有以下几个值:

  • 0 (uninitialized) or (request not initialized)
  • 1 (loading) or (server connection established)
  • 2 (loaded) or (request received)
  • 3 (interactive) or (processing request)
  • 4 (complete) or (request finished and response is ready)

接着下一步是对HTTP响应返回值进行区分处理:

status
if (httpRequest.status === 200) {    // Perfect!} else {    // There was a problem with the request.    // For example, the response may have a 404 (Not Found)    // or 500 (Internal Server Error) response code.}

 返回结果

responseText 和 responseXML
httpRequest.responseText – returns the server response as a string of texthttpRequest.responseXML – returns the response as an XMLDocument object you can traverse with JavaScript DOM functions

 

 到此一个基本的ajax应用框架就出现了,下面的展示一个基本的例子

    my first ajax program        

 

转载于:https://www.cnblogs.com/allencxw/p/9027686.html

你可能感兴趣的文章
SpringCloud项目启动报错:NoClassDefFoundError: org/springframework/core/env/EnvironmentCapable...
查看>>
字符串转义序列--字符串格式化--操作符号
查看>>
查看Linux下*.a库文件中文件、函数、变量等情况
查看>>
睡觉问题早晚成为我顶头疼的问题。。。-PHP
查看>>
检测文件是否存在木马字眼
查看>>
git进阶-远程仓库-IDEA中GIt使用
查看>>
依赖注入
查看>>
project.config.json在设置了编译模式的时候会出现配置,怎么解决
查看>>
va_start
查看>>
TCP/IP协议之分层
查看>>
Android编译选项eng、user、userdebug的区别
查看>>
spring强行注入和引用的例子
查看>>
使用阿里云免费的ssl证书,让网站http变成https
查看>>
软件工程——Java版2048游戏学习报告
查看>>
翻硬币 贪心
查看>>
生成banner
查看>>
IIS7下配置FTP服务器时遇到的两个问题
查看>>
jiry 2
查看>>
[新春特献]响应式设计专题
查看>>
半角占一个字符,全角占两个字符
查看>>