1) AJAX stands for Asynchronous JavaScript and XML. It allows web pages to update parts of a page asynchronously by exchanging data with a web server behind the scenes without reloading the whole page. 2) AJAX is based on open standards like JavaScript, XML, HTML and CSS. It allows for cross-browser and cross-platform applications. 3) The document discusses how AJAX uses the XMLHttpRequest object to send and receive data from a server asynchronously by HTTP requests in the background. This makes web applications more interactive and responsive.

1. AJAX
นาย ชัยภัทร เนื่องคํามา
email : pk_a1977@hotmail.com
website: http://emap.wordpress.com
ชัยภัทร เนื่องคํามา 1

2. Asynchronous JavaScript And XML
AJAX is an acronym for Asynchronous JavaScript And XML.
AJAX is not a new programming language, but simply a new technique for
creating better, faster, and more interactive web applications.
AJAX uses JavaScript to send and receive data between a web browser and
a web server.
The AJAX technique makes web pages more responsive by exchanging data
with the web server behind the scenes, instead of reloading an entire web
page each time a user makes a change.
ชัยภัทร เนื่องคํามา 2

3. AJAX Is Based On Open Standards
AJAX is based on the following open standards:
• JavaScript
• XML
• HTML
• CSS
The open standards used in AJAX are well defined, and supported by all major
browsers. AJAX applications are browser and platform independent. (Cross-Platform,
Cross-Browser technology)
ชัยภัทร เนื่องคํามา 3

4. ชัยภัทร เนื่องคํามา 4

5. ชัยภัทร เนื่องคํามา 5

6. ชัยภัทร เนื่องคํามา 6

7. AJAX Is About Better Internet Applications
Web applications have many benefits over desktop applications:
• they can reach a larger audience
• they are easier to install and support
• they are easier to develop
However, Internet applications are not always as quot;richquot; and user-friendly as traditional
desktop applications.
With AJAX, Internet applications can be made richer (smaller, faster, and easier to
use). ชัยภัทร เนื่องคํามา 7

8. AJAX Uses XML And HTTP Requests
A traditional web application will submit input (using an HTML form) to a web server.
After the web server has processed the data, it will return a completely new web page
to the user.
Because the server returns a new web page each time the user submits input, traditional
web applications often run slowly and tend to be less user friendly.
ชัยภัทร เนื่องคํามา 8

9. AJAX Uses XML And HTTP Requests
With AJAX, web applications can send and retrieve data without reloading the whole
web page. This is done by sending HTTP requests to the server (behind the scenes),
and by modifying only parts of the web page using JavaScript when the server returns
data.
XML is commonly used as the format for receiving server data, although any format,
including plain text, can be used.
You will learn more about how this is done in the next chapters of this tutorial.
ชัยภัทร เนื่องคํามา 9

10. PHP and AJAX
There is no such thing as an AJAX server.
AJAX is a technology that runs in your browser. It uses asynchronous data transfer
(HTTP requests) between the browser and the web server, allowing web pages to
request small bits of information from the server instead of whole pages.
AJAX is a web browser technology independent of web server software.
However, in this tutorial we will focus more on actual examples running on a PHP
server, and less on how AJAX works.
ชัยภัทร เนื่องคํามา 10

11. The XMLHttpRequest
The XMLHttpRequest object is the key to AJAX.
Creating An XMLHttpRequest Object
Different browsers use different methods to create an XMLHttpRequest object.
Internet Explorer uses an ActiveXObject.
Other browsers uses a built in JavaScript object called XMLHttpRequest
ชัยภัทร เนื่องคํามา 11

12. The XMLHttpRequest
var XMLHttp=null
if (window.XMLHttpRequest){
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject){
XMLHttp=new ActiveXObject(quot;Microsoft.XMLHTTPquot;)
} ชัยภัทร เนื่องคํามา 12

13. function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject(quot;Msxml2.XMLHTTPquot;);
}
catch (e){
xmlHttp=new ActiveXObject(quot;Microsoft.XMLHTTPquot;);
}
}
return xmlHttp; ชัยภัทร เนื่องคํามา 13
}

14. AJAX&Web Mapping Application
ชัยภัทร เนื่องคํามา 14

15. AJAX & Web Mapping Application
AJAX ถูกนํามาใชในการพัฒนาการทํางานและการรับสงขอมูลในสวนของ
Web Mapping Application ซึ่งทํางานบนฝงลูกขาย โดย Web Mapping Application
แบบใหมจะเพิ่มความสามารถในการโตตอบกับผูใช และมีการรับสงขอมูลเชิงบรรยาย
และขอมูลเวกเตอรกราฟกในรูปแบบ XML base ดวย AJAX
AJAX ถูกนําไปใชอยางแพรหลายมาก โดยเฉพาะ Mushup Application ไดแก
Google Map, Google Earth API, Yahoo Map API และอื่นๆ
ชัยภัทร เนื่องคํามา 15

16. Spatial Encoding
AJAX สามารถทํางานรวมกับขอมูล XML ในการรับสงขอมูลระหวางแมขาย
และลูกขายไดเปนอยางดีดังนั้น จึงมีการพัฒนารูปแบบการเขารหัสขอมูลภูมสารสนเทศ
ิ
และขอมูลเชิงพื้นที่ในลักษณะ XML Base มากมายเชน KML, GeoRSS, GML เปนตน
ชัยภัทร เนื่องคํามา 16

17. Spatial Encoding
AJAX สามารถทํางานรวมกับขอมูล XML ในการรับสงขอมูลระหวางแมขาย
และลูกขายไดเปนอยางดีดังนั้น จึงมีการพัฒนารูปแบบการเขารหัสขอมูลภูมสารสนเทศ
ิ
และขอมูลเชิงพื้นที่ในลักษณะ XML Base มากมายเชน KML, GeoRSS, GML เปนตน
ชัยภัทร เนื่องคํามา 17

18. KML
KML เปนรูปแบบการจัดเก็บขอมูลเชิงพื้นที่ที่พัฒนามาจากระบบ
บริการแผนที่ของ Google ปจจุบัน KML เปนมาตรฐานการแลกเปลี่ยนขอมูล
หนึ่งของ OGC โดยมีรูปแบบการจัดเก็บขอมูลแบบ XML มีความยืดหยุน
สามารถเชื่อมโยงกับระบบสารสนเทศตางๆไดมากมาย ใชระบบพิกัดภูมิศาสตร
คือ EPSG 4326 World Geodetic Reference System KML มี MIMETYPE คือ
application/vnd.google-earth.kml+xml นอกจากนี้ยังมีรูปแบบบีบอัดในลักษณะ
ของไบนารีคือ KMZ อีกดวย
ชัยภัทร เนื่องคํามา 18

19. KML
ชัยภัทร เนื่องคํามา 19

20. GeoJson
GeoJson เปนรูปแบบการจัดเก็บขอมูลเชิงพื้นที่ที่กําลังพัฒนา โดยเนน
ไปที่การรับสงขอมูลผานอินเตอรเน็ตโดยใชรูปแบบของ Json ซึ่งทําใหงายใน
การเขารหัสและการแปล โดยนิยมนํามาใชทํางานรวมกับเทคนิค AJAX
ชัยภัทร เนื่องคํามา 20

21. GeoRSS
GeoRSS เปนรูปแบบการจัดเก็บขอมูลเชิงพื้นที่ประเภทจุด ในรูปแบบ
ของคาพิกัดภูมิศาสตร X,Y โดยมีการสราง TAG พิเศษสําหรับการบรรยายและการ
เก็บคุณสมบัติเชิงพื้นที่เสริมตอมาจากมาตรฐานของ RSS 2.0 โดยมีการนําไปใชใน
ระบบ feeding ขาวสารหรือขอมูลที่มีการเปลี่ยนแปลง โดยขอดีคือใชงานกับ feed
reader ได ถาตองการแสดงผลในรูปแบบ mapping ก็สามารถใชงาน mushup อยาง
google map ได โดย API รองรับ Georss อยูแลว
ชัยภัทร เนื่องคํามา 21

22. Demo AJAX&Geoweb Application
ชัยภัทร เนื่องคํามา 22

23. Business
ชัยภัทร เนื่องคํามา 23

24. News / Event
ชัยภัทร เนื่องคํามา 24

25. News / Event
ชัยภัทร เนื่องคํามา 25

26. Real estate
ชัยภัทร เนื่องคํามา 26

27. VDO Tracking
ชัยภัทร เนื่องคํามา 27

28. whereyougonnabe
ชัยภัทร เนื่องคํามา 28

29. Barbond
ชัยภัทร เนื่องคํามา 29

30. Spot Information
ชัยภัทร เนื่องคํามา 30

31. Social Network
ชัยภัทร เนื่องคํามา 31

32. Photo Sharing
ชัยภัทร เนื่องคํามา 32

33. MapServer Application
ชัยภัทร เนื่องคํามา 33

34. Geoweb Development Framework
ชัยภัทร เนื่องคํามา 34

35. GeoDjango
Django is a high-level Python web framework that
encourages rapid development and clean, pragmatic design.
GeoDjango is an official branch of Django that intends to be a
world-class geographic web framework. GeoDjango is BSD-
licensed and cross-platform (Linux, Windows, Mac OS X, and
Solaris platforms) and supports the spatial capabilities of the
PostGIS, Oracle, and MySQL databases
ชัยภัทร เนื่องคํามา 35

36. GeoDjango
GeoDjango speaks the languages of the geographic web and
supports KML, GML, WKT, WKB, GeoRSS, and GeoJSON formats.
Web maps may be created using the APIs for Google Maps and
OpenLayers. Moreover, the built-in geographic admin supports the
manipulation and visualization of spatial data. Databrowse
dynamically creates a rich, browsable web site by introspecting your
models.
http://geodjango.org/docs/model-api.html
ชัยภัทร เนื่องคํามา 36

37. ชัยภัทร เนื่องคํามา 37

38. Open Geo-Stack
An open geo-stack offers a flexible and feature filled solution
for your web mapping needs. Store your data with PostGIS, set up
GeoServer to publish it, and develop an OpenLayers based client for
the browser. This tutorial will focus on these three core components of
an open source geo-stack and will also cover architectures that cross
the proprietary/open source divide.
ชัยภัทร เนื่องคํามา 38

39. MapStrack
Mapstraction floats on top of niine APIs: Microsoft VE,
Google, Yahoo!, MultiMap, Poly9 FreeEarth, Map24, MapQuest, and
OpenStreetMap. Each one has different features and qualities of aerial
and mapping data, and your use may depend on area of interest (who
has the best aerial imagery in Bangalore?) or features (can I plot
GeoRSS?). With Mapstraction you can make these decisions on the fly
and not get locked into one specific API. We’ll tour adding simple
maps, pins, and geocoding. Plotting GeoRSS and switching APIs on
the fly. Some JavaScript knowledge is preferable but not an absolute
necessity. ชัยภัทร เนื่องคํามา 39

40. ชัยภัทร เนื่องคํามา 40

41. OpenGWT
Google Web Toolkit (GWT) is an open source Java software
development framework that allows web developers to create Ajax
applications in Java. It is licensed under the Apache License version
2.0.[1]
GWT emphasizes reusable, efficient solutions to recurring
Ajax challenges, namely asynchronous remote procedure calls, history
management, bookmarking, and cross-browser portability.
ชัยภัทร เนื่องคํามา 41

42. OpenGWT
GWT - OpenLayers plugin is an open source project implemented by Erdem
Gunay. Although it does not support all the OpenLayers classes yet, it is in a good shape
to use main features including
- Map, Marker, Icon, LonLat, Size, Pixel, Bounds etc.
- Layers (WMS, Google, Vector, Markers)
- Controls (DrawFeature, LayerSwitcher, MousePosition, MouseToolbar, PanZoomBar,
Scale)
- Handlers (Point, Path, Polygon)
- Popups (Popup, Anchored, AnchoredBubble) Events
ชัยภัทร เนื่องคํามา 42

43. OpenGWT
http://sourceforge.net/projects/gwt-openlayers
ชัยภัทร เนื่องคํามา 43

44. Ruby (Cartographer Plugin)
Allows you to plop Google Maps down into your Rails app without knowing a
lick of ECMAScript Javascript.
http://wiki.rubyonrails.org/rails/pages/Cartographer+Plugin
Get a Google Maps API key and tell it to Cartographer
add <%= gmaps_header %> to your layout
In controller, such as:
@map = Map.new(:name => ‘mymap’, :width => 300, :center => Point.new(-110, 33))
In view, such as: <%= @map.to_html %>
ชัยภัทร เนื่องคํามา 44

45. Ruby (Geokit)
Geokit is a Rails plugin for building location-based apps. It provides geocoding,
location finders, and distance calculation in one cohesive package. If you have any tables
with latitude/longitude columns in your database, or if you every wanted to easily query
for quot;all the stores within a 50 mile radius,quot; then GeoKit is for you.
http://geokit.rubyforge.org/
ชัยภัทร เนื่องคํามา 45

46. Ruby
ชัยภัทร เนื่องคํามา 46

47. Geoweb Resource
- Slash GEO
- GIS Development
- Emap
ชัยภัทร เนื่องคํามา 47

48. ขอบคุณครับ
ชัยภัทร เนื่องคํามา 48