首页 > 其他分享 >Ajax基础

Ajax基础

时间:2023-02-17 20:31:40浏览次数:30  
标签:请求 get req 基础 send Ajax 参数 post

什么是Ajax(Asynchronous Javascript And XML)?

异步刷新请求(服务),一般是在无需请求整个页面时执行的操作,局部页面发生改变。

为什么使用Ajax?

无刷新:不用刷新整个页面,只刷新局部

无刷新的好处:1、只更新部分页面,有效利用带宽

2、提供连续的用户体验

3、提高以c/s的交互结果,操作更方便

Ajax的工作流程:

1、由游览器中的脚本提供ajax引擎对象

2、通过引擎对象进行发送异步请求到服务器

3、服务器进行处理(获取)响应数据,给前台Ajax引擎对象

4、通过引擎对象对应的状态码进行数据获取,在回调函数中执行

5、进行页面显示

XMLHttpRequest

整个ajax的核心,提供异步发送请求的能力

常用方法:

open(String method,String url,boolean async) 创建请求

method:提交方式 get post方式

url:提交的地址

async:是否执行异步 true异步 false同步(会进入请求线程阻塞,必须等待其他请求结束)

send() 发送请求,一般send()方法用于携带请求参数(仅限于post方式)一般send参数为null或""

都为get方式提交

注意:get提交方式请求参数位于url之后(传统方式拼接)

abort() 取消当前请求

setRequestHeader(String header,String value) 设置当前请求头

getResponseHeader(String header) 根据名称获取请求头

getAllResponserHeader() 获取所有响应请求头信息

Ajax在js中使用步骤:

1、创建XMLHttpRequest对象,根据游览器不同,创建对象方式不同

var req=null;

if (window.XMLHttpRequest){//true IE7+ 谷歌 苹果 火狐

req=new XMLHttpRequest();

} else {//IE5 IE6游览器兼容此请求

req=new ActiveXObject("Microsoft.XMLHTTP")

}

2、设置当前对象执行的回调函数(执行完整请求后调用的函数)

req.onreadystatechange=function () {

if (req.readyState==4 && req.status==200){}

}

req.readyState:ajax生命周期状态码

0:未创建 1:开始发送请求 2:请求完毕 3:开始响应 4、结束响应

200:正常请求 404:找不到资源(url地址找不到) 500:服务器内部错误

405:请求方式不对

3、创建请求并执行发送

get req.open("get","请求路径","true"); 请求路径一般携带参数

req.send(null); 或者req.send("");

post req.open("post","请求连接",true);

req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//进行发送请求,并携带参数

req.send("参数名=参数值&参数名=参数值");

不同点:get方式可以请求路径中携带参数,不能在send()方法请求时加参数

post方式不可以在请求路径中携带参数,可以在send()方法请求时加参数


传统js方式的ajax不足:

1、步骤繁琐

2、属性方法不好记忆

3、游览器兼容问题

4、处理后台响应的各类数据比较繁琐、复杂

使用jQuery的ajax方法实现异步

语法:$.ajax({

url:请求路径,

type:请求方式(get/post)默认get,

data:发送给服务的数据,

dataType:响应的数据类型,

timeout:请求超时长,

global:是否触发全局ajax,默认触发,

success:function (data) { }, 执行成功

error:function () {}, 请求错误执行

beforeSend:function () {}, 请求之前执行

complete:function () {} , 始终执行

})

什么是json数据格式

1、轻量级语言交换格式

2、独立于语言的文本格式

3、在客户端和服务器之间传输数据

优点:1、轻量级语言

2、结构简单

3、易于解析

json语法:

var jsnotallow={"属性名":"属性值","属性名1":"属性值1"}

例如:name:张三 age:18 sex:男

var stu={"name":"张三","age":"18","sex":"男"}

jQuery的 方法(AJAX):

$.get()

$.post()

$getJSON()

$(选择器).load(请求地址,携带参数,回调函数);

将服务器影响的数据直接默认使用html()方法放置到页面上

注意:1、load()只对选中的元素生效

2、默认使用get()请求,如果携带的参数是对象,则使用post()请求

转换表单参数信息:

将匹配的元素转换为对象数组的形式进行保存

var serArr = $("选择器").serializeArray();

注意:

1、获取的不能有表单禁用元素、文件元素

2、必修有name属性

3、可以获取选中的单选和复选框

4、submit按钮也可以获取到

5、序列化内容包含键值对的形式 key=value

var param = $.param(serArr);//参数列

FashJSON处理数据:

是一个用于json数据格式和对象之间的解析和合生成。(来回转换)

解析器:将json数据解析为Java(反序列化)对象

生成器:将Java对象生成json(序列化)格式代码



JSON.toJSONString(Object) 序列化为字符串

JSON.toJSONString(Object,true) 具有格式

JSON.toJSONString(Object,SerializerFeature.静态常量) 可以设置JSON格式

JSON.toJSONStringWithDateFormat(date,"yyyy-MM-dd hh:mm:ss")日期对象转json对象

var param=$jq("#content,#username").serialize(); 序列化表单参数数据

让渡:使用jQuery让出$的使用权,可以替换为其他符号

var $jq=jQuery.noConflict();

jQuery加载方式:

1、jQuery(document).ready({});

2、让渡前:$({});

3、让渡后:$jq({});







标签:请求,get,req,基础,send,Ajax,参数,post
From: https://blog.51cto.com/u_15907719/6064521

相关文章

  • Java面向对象基础
    Java面向对象基础什么是面向对象编程,Java类和对象有什么区别OOP(ObjectOrientedProgramming)编程是利用“类”和“对象”来创建模型实现对真实世界的描述使程序更加......
  • Java基础知识点(数组遍历以及常见问题)
    一:数组遍历:将数组中的所有内容取出来,取出来之后可以对它进行一系列的操作。注意:遍历指的是取出数据的过程,不要局限的理解为遍历就是打印。在Java中,关于数组的一个长度属性.l......
  • Java基础知识点(数组较难的的一个练习-数组的排序)
    冒泡排序:第一步:从第一个元素开始,将相邻的两个元素进行比较,如果前一个元素比后一个元素大,则交换他们的位置,直到最后两个元素完成比较。整个过程完成后,数组中最后一个元素自然......
  • 【LeetCode二叉树#00】二叉树的基础知识
    基础知识分类满二叉树如果二叉树中除了叶子结点,每个结点的度都为2,则此二叉树称为满二叉树。完全二叉树除了底层外,其他部分是满的,且底层从左到右是连续的,称为完全二......
  • 面试最常见算法1—树—基础篇
    前言关于树的算法基本解法就三类:递归,队列,栈刷题网站推荐:​​牛客网​​​​Leetcode​​1.二叉树遍历(前序)publicList<Integer>preorderTraversal(TreeNoderoot){......
  • Linux基础实训(利用线程和互斥锁)
                         实验要求(linux)1定义一个长度为8的数组2输入不同的8个(大写)字母(ASDFGHJK)3对字符串进行排序4用线程和互斥锁输出按顺......
  • windows cmd基础命令
    cmdmd新建目录rd 删除目录(非空目录)rd 删除目录下所有文件cd 改变当前目录cd.. 返回上一级目录cd\ 返回根目录d: 切换盘符到D盘dir 显示当前目录下的文件del1.txt 删除......
  • javascript的一些基础知识
    随手记录一些javascript的一些基础知识,之前只是简单用到javascript,并没有了解其中的概念。1. JavascriptObject:InJavaScript,almost"everything"isanobject.......
  • 【编程基础之Python】4、安装Python开发工具
    (【编程基础之Python】4、安装Python开发工具)安装Python开发工具为什么需要开发工具通常情况下,为了提高开发效率,需要使用相应的开发工具,进行Python开发也需要安装开发工......
  • java基础巩固-详解泛型
    java泛型(generics)为jdk5引入的新特性,泛型提供了编译时类型安全检测机制,可以在编译时检测到非法的类型。泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参......