原生js实现ajax与jquery的ajax库,及json
Ajax:
和服务器进行数据交换(异步)
用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的
同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议,端口下
在ajax中常用的一些函数:
原生js的ajax,get方法:
var request=new XMLHttpRequest();
request.open('GET','service.php?number='+document.getElementById('keyWord').value);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
document.getElementById('searchResult').innerHTML;
}else{
alert('error!'+request.status);
}
} ajax的post方法:
var request=new XMLHttpRequest();
request.open('POST','service.php');
var data='name='+document.getElementById('staffName').value
+"&number="+document.getElementById('staffNumber').value
+"&sex="+document.getElementById('staffSex').value
+"&job="+document.getElementById('staffJob').value;
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(data);
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
document.getElementById('createResult').innerHTML;
}else{
alert('error!'+request.status);
}
}
}
上述是不含json的ajax,现在实际操作中基本都是使用json,故什么是json
Json:javascript对象表示法
Json是存储和交换文本信息的语法,类似于XML(长度短小,读写速度更快),它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成
Json是独立于语言的,不管什么语言都可以解析json,只需要按照json的规则来
Json可以使用javascript内建的方法直接解析,转换成javascript对象,
Json数据的书写格式是:名称/值对
名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,例如:“name”:“rose”
json的值可以是下面这些类型:
数字(整数或者浮点数)
字符串(在双引号中)
逻辑值(true false)
数组(在方括号中)
对象(在花括号中)
null
例如:
JSON对象:
JSON对象和Js对象中有两个不同:1.没有声明变量 2.没有末尾的分号,对象的属性必须加双引号
例如:
{
"name":"jeo",
"age":,
"school":{
"name":"cq",
"location":"cq"}}
JSON数组:采用数组字面量形式:没有变量和分号
[,'h1',true]
讲数组和对象结合起来:
[
{
"title":"JS",
"authors":[
"NICO"],
edition:,
year:},
{
"title":"CSS",
"authors":["JACK"],
edition:,
year:}]
get方法
var request= new XMLHttpRequest();
request.open("GET","service.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById('searchResult').innerHTML=data.msg;//服务器端的字段
}
else{
document.getElementById('searchResult').innerHTML="出现错误:"+data.msg;
} }
else{
alert('error:'+request.status)
} }
post方法
var request=new XMLHttpRequest;
request.open("POST","service.php");
var data='name:'+document.getElementById('staffName').value+
'&number:'+document.getElementById('staffNumber').value+
'&sex'+document.getElementById('staffSex').value+
'&job'+document.getElementById('staffJob').value;
request.setRequestHeader('content-Type','application/x-www-form-urlencoded');
request.send(data);
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById('createResult').innerHTML=data.msg;
}
else{
document.getElementById('createResult').innerHTML="error:"+data.msg;
}
} else{
alert('error:'+request.status)
}
}
原生js实现ajax与jquery的ajax库,及json的更多相关文章
- js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- 原生JS研究:学习jquery源码,收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 通过原生js的ajax或jquery的ajax获取服务器的时间
在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...
随机推荐
- maven 插件2
Maven is - at its heart - a plugin execution framework; all work is done by plugins. Maven 本质上就是一个插件 ...
- linux write/wall 1
linux:/opt/software/lktest/c # wallhellllllllllllllllllllooooooooooooooooo^[[AasZZZZZZ^Clinux:/opt/s ...
- eclipse gradle插件 org.gradle.tooling.GradleConnectionException: Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-3.4-bin.zip'.
eclipse安装gradle后出现如下异常: org.gradle.tooling.GradleConnectionException: Could not install Gradle distr ...
- Cause: java.sql.SQLException: The user specified as a definer ('root'@'%') does not exist
权限问题,授权 给 root 所有sql 权限 mysql> grant all privileges on *.* to root@"%" identified by &q ...
- APP-12-视觉技术-身份证识别
1.Postman测试 图片转换为Base64:http://imgbase64.duoshitong.com/ Base64: Base64数据去掉表头文件:data:image/png;base6 ...
- input点击后的 默认边框去除
转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...
- oracle第二天笔记
多表查询 /* 多表查询: 笛卡尔积: 实际上是两张表的乘积,但是在实际开发中没有太大意义 格式: select * from 表1,表2 */ select * from emp; select * ...
- python 函数返回值笔记
今天学习python时候学习到闭包和柯里化 感觉看概念时候不好理解,自己写下大概就明白点了 柯里化如下 定义一个加法函数 def add(x, y): return x + y 这是没有柯里化之前的函 ...
- Python基本模块介绍:sys、platform
sys模块 常用函数 sys.argv 命令行参数,实现从程序外部向程序传递参数. sys.path 模块搜索路径. sys.platform 获取当前系统平台. sys.version 获取pyth ...
- impdp导入文件失败问题解决(ORA-39001/ORA-39000/ORA-39143)
测试环境 SuSE11 + ORACLE11gR2 问题现象 执行 impdp导入现场导回的dmp文件,导入失败.错误提示如下 $impdp sysdb/oracle directory=imp_da ...